[RESOLVED] Canvas Drawing - clear all? delete line?

dougal85

How do empty the content of the canvas? IE. make it blank again.

Is there a way I can give a line an ID or something so I can remove a line that's no longer needed.

Where can i find documentation on Canvas? I've found some on the safari website and mozilla - but nothing thats particularly useful!

Thanks... I'm having a bit of a JS day, so I'll probably have more fun questions for you soon 😉

scrupul0us

"the canvas" are u talking about the entire browser window?

document.getElementByTAG["body"].innerHTML = "";

will clear the entire window

dougal85

I mean the canvas tag. http://developer.mozilla.org/en/docs/Canvas_tutorial

<canvas id="myCanvas"></canvas>

When lines are drawn like this;


function drawLine(x1,y1,x2,y2){

canvas = document.getElementById('myCanvas');

ctx = this.canvas.getContext('2d');	

ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.stroke();
}

Weedpacket

At a quick glance it looks like you clearRect() the entire thing.
From the draft spec:

The clearRect() method must clear the pixels in the specified rectangle to a fully transparent black, erasing any previous image. If either height or width are zero, this method has no effect.

scrupul0us

thats pretty impressive

dougal85

Thanks again weedpacket. Your constantly a life saver. I didn't manage to find a good specification for it.

scrupul0us;

Yeah, its pretty cool.

But be warned, its not supported in IE.

Mozilla, Safari and Opera all support it. Safari the original creators and also have the best support. (or so i read somewhere).

I'm using it in part of a project for university, just as a demonstration/prototype. Therefore, I don't need to worry about cross browser support for this part. woohoo.

Weedpacket

It really does look fascinating; Javascript has so long been hobbled for graphics because of the lack of support in HTML, and SVG is more pain than it's worth. We'll need to see. <noscript> stuff/substitute image and the like.

What's the betting IE9 won't support <canvas>?