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.
Aucun commentaire:
Enregistrer un commentaire