Geek Answers Handbook

Best practice for creating canvas element

I experimented with creating a canvas element in several different ways and wondered if anyone knew which of these (or some other) methods was most effective.

The simplest one apparently puts the canvas element in html like this:

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

and then in javascript:

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

There are times when I need to save my entire biznass canvas in a .js file (for example, when I want to dynamically change the width / height of an element), and I will 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? Minuses? Edits? Other options?

+4
source share
2 answers

The first is the best to date.

The first one benefits from efficiency (slightly) because the second and third forces the page to re-plan unnecessarily. Also, if there is a bug in JavaScript that stops subsequent execution, the page will look terribly weird.

In addition, you should always choose the first for accessibility purposes. If someone has JavaScript disabled, you still want them to see the fallback content. Even if you need to say "enable JavaScript!". or "Get a modern browser!"

If you use the second or third method, the user may never know, and they will continue to think simply that you are sucking page layouts, because there is a strange space where there should be spare content (or canvas, for that matter).

Even with all this, methods 2 and 3 are a little out of order. When do you add canvas? after onload fires? Well, by shooting onload , the page just said that the DOM was made to dance and you're done! And then you go and change the DOM!

... How rough!

Of course, you probably won't use any libraries that rely on the implicit promise made in onload that you understand using 2 or 3, but this is an unnecessary break in the agreement if you can avoid it.

By the way, to run simple applications or examples, I have this script:

http://jsfiddle.net/eAVMs/

The first method is used. If you use canvas a lot, you should also add this script!

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

The only Id method cautions. Using document.write usually considered bad practice for arbitrary creation of elements.

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

The other two methods are perfectly correct and accurate. This is really a matter of preference. Typically, I create a canvas tag if I don't need a temporary canvas to do something in which I used the createElement method.

In addition, this is really just a matter of preference and generally does not affect performance at all.

0
source

More articles:


All Articles