Question

I’ve been experimenting with creating a canvas element in a few different ways and was wondering if anyone knows which of these (or some other) ways is the most efficient.

the most basic seems to be placing a canvas element in the html like this:

<canvas id="myCanvas" width="500", height="500"></canvas>

and then in the javascript:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

there are times I need to keep all my canvas biznass in a .js file (ex when I want to dynamically change the width/height of the element) and I’ll do it like this:

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.height = '500';
canvas.width = '500';
var ctx = canvas.getContext('2d');

or when I get lazy, something like this:

document.write("<canvas id='myCanvas' width='500', height='500'></canvas>");

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

Pros? Cons? Edits? Other options?

Answer 1

The first one is the best by far.

The first one wins on efficiency (slightly) because the second and third ones cause the page to re-layout unnecessarily. Also, if there’s an error in the JavaScript that halts subsequent execution the page will look awfully weird.

Furthermore, you should always choose the first one for accessibility purposes. If someone has JavaScript disabled you will still want them to see the fallback content. Even if it is just to say “turn on JavaScript!” or “Get a modern browser!”

If you use the second or third method, the user might never know, and they will continue on merely thinking that you suck at page layouts because there’s a strange space where fallback content (or a canvas for that matter) ought to be.

---

Even aside from all that, methods 2 and 3 break the order of things a little bit. When are you adding the canvas? after onload fires? Well by firing onload the page just said that the DOM was done doing it’s dance and its all ready! And then you go and change the DOM!

…How rude!

Of course you probably won’t be using any libraries that rely on the the implicit promise made in onload that you are sorta breaking by using 2 or 3, but it’s an unnecessary break of convention if you can avoid it.

---

By the way for the start of simple apps or examples I have this fiddle bookmarked:

http://jsfiddle.net/eAVMs/

Which uses the first method. If you use canvas a lot, you should bookmark this fiddle too!