best practice for creating a canvas element

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?

I'd avoid `document.write` if I were you. Your first and second method are ok, the 2nd is more suitable for creating canvas on the fly (inside an event listener's function/etc), while the first is less typing. Use whichever you consider more readable/maintainable. — Fabrício Matté, Jun 16 '12 at 02:38

Simon Sarris · Accepted Answer · 2012-06-16T04:21:01.740

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!

While I agree with pretty much all of this, the second method is pretty important when it comes to creating in memory, or temp canvases, generally only in addition to the first canvas that should be declared like you stated. +1 for a thought out response though. — Loktar, Jun 16 '12 at 04:31
I agree, always avoid DOM manipulation wherever possible because it has an overhead in respect of rendering you page — Alex, Jun 16 '12 at 13:47
right, I'm working on a library of sorts and find that at times option two allows for more versatility, though I'd hate to think I'm stepping on Mr.DOM's toes! ...don't mean to be rude ^_^ thanks for all the advice + info! — Nick Briz, Jun 17 '12 at 23:01

score 1 · Answer 2 · edited May 23 '17 at 11:43

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

Is the only method Id caution against. Using document.write is generally considered bad practice for arbitrarily creating elements.

I could just repeat why here, but this answer explains it well enough.

The other two methods are perfectly valid and fine. Its really just a matter of preference. Generally I create a canvas tag, unless I need a temp canvas to do something, in which Ill use the createElement method.

Other than that its really just a matter of preference and overall doesn't affect performance in any way.

best practice for creating a canvas element

2 Answers2