Menu
I have a canvas that is the container for some stuff. Now I want to completly clear the whole content.
Here my HTML:
<body>
<canvas id="my" width="1800" height="1000" style="border:3px solid"></canvas>
<br>
<input type="button" value="line" onclick="drawline()"/>
<input type="button" value="circle" onclick="drawcircle()"/>
<input type="button" value="reset" onclick="reset()"/>
</body>
Here my Javascript:
var canvas;
var context;
function drawline()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
context.stroke();
}
function drawcircle()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.stroke();
context.closePath();
}
function reset()
{
canvas = document.getElementById("my");
canvas.clearRect(0,0, canvas.width, canvas.height);
}
But the reset button don't work. I'm a beginner and already tried some debugging: He goes into the reset function but crashed at the second line. canvas.width and canvas.height also got the right values - I printed them out to see what's in.
EDIT: Thanks to "Yeldar Kurmangaliyev" - to get the 2d context of the canvas solved a part of the problem. But this kind of drawing in my js file still won't disappear:
function tree()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
for (var i = 0; i <= 1; i++)
{
if (i === 0)
{
context.translate(350, 200);
}
else
{
context.translate(0, 100);
}
context.beginPath();
context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);
context.lineTo(0, -140);
context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
context.closePath();
context.stroke();
}
}
EDIT2: I found the solution for the second problem. It is the context.translate. I assume, the clear.Rect clears the wrong area in the canvas because the "zero coordinates" were moved to the coordinates that are defined in the translate. Means 0.0 is after the translate 350.200 and then 350.300, 350.400, ...
This is now my working reset function. Thanks to this post:
function reset()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0,0, canvas.width, canvas.height);
}
376
You are trying to call clearRect on the result of document.getElementById (DOM element). clearRect is a member of canvas context.
It should be:
function reset()
{
canvas = document.getElementById("my");
context = canvas.getContext("2d");
context.clearRect(0,0, canvas.width, canvas.height);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
