CODEWITHSUNDEEP
javascripthtmlcanvas
Matthew Lancaster
Matthew Lancaster

Reputation: 519

HTML5 Canvas - Having 2 Canvas Objects side - by - side

I know you can layer canvases on top of each other just as if you were making an image in Photoshop but are you able put canvas objects above and below each other or side-by-side?

I'm looking to draw a graph which allows you to choose a space and depending on what color choice you have it'll change the block based on that choice.

Here's my thought: Canvas #1 - Draw Graph Paper Canvas #2 - Right side of Canvas #1 - Tab that has 4 color choices. I'd figure out the x-y of these to grab the color based on the color image. Canvas 1 block color would reflect this choice.

Is this a good way of going about this implementation?

Upvotes: 0

Views: 2956

Answers (1)

net.uk.sweet
net.uk.sweet

Reputation: 12431

Yes you can place canvases above, below and side-by-side each other. A canvas is an HTML element and can be positioned like any other using CSS.

I'd probably try to avoid using a canvas for your color choice tab unless it's absolutely necessary for some reason you haven't mentioned. If you use standard DOM elements instead you'll be able to bind to the click event directly rather than having to figure out the mouse position relative to graphics in your canvas.

Here are some good reasons not to use canvas to create UI components.

Upvotes: 1

Related Questions