Is it possible to have more than 1 drawn canvas?


#1

how to modify the code to have more than 1 canvas drawn , each one with its own animated text , bubbles shape and colors . Obviously just changing the selector to choose canvas tags instead of canvas with id '#myCanvas' is not enough . I will be happy to know any suggestions


#2

Hi Mohamed,

Yes, it's possible. If you look at real stuff done with <canvas>, you'll see that they do something like:

c = document.querySelector('#canvas');
ctx = c.getContext("2d");

// do stuff like c.fillRect(...);
// to make drawings

So, with multiple <canvas>es, you would do something like this:

c1 = document.querySelector('#canvas1'),
c2 = document.querySelector('#canvas2');
ctx1 = c1.getContext("2d");
ctx2 = c2.getContext("2d");

// do stuff like
// c1.fillRect(...);
// c2.fillRect(...);
// to make drawings

I've made a few simple things with <canvas>, feel free to poke around in the code :)

http://codepen.io/Zystvan/pen/oXoyaO?editors=001
http://codepen.io/Zystvan/pen/RNgGde?editors=001
http://codepen.io/Zystvan/pen/oXomxM?editors=001