Only first of two canvases works


#1

hello, i’ve been trying to implement two html canvases and it seems only the first of them is actually being drawn.

html:

<template name="Game">
       <canvas id="mainCanvas" width="1920" height="1080"></canvas>
       <canvas id="subCanvas" width="1920" height="1080"></canvas>
</template>

script:
> Template.Game.onRendered(function() {
> this.canvas = document.getElementById(“mainCanvas”);
> this.ctx = this.canvas.getContext(“2d”);
> this.maskCanvas = document.getElementById(“subCanvas”);
> this.pixelContext = this.maskCanvas.getContext(“2d”);
> …
> …
> …
> this.ctx.beginPath();
> this.ctx.arc(x, y, this.radius, 0, 2*Math.PI, false);
> this.ctx.lineWidth = 6;
> this.ctx.strokeStyle = this.line_color;
> this.ctx.fillStyle = this.bg_color;
> this.ctx.stroke();
> this.ctx.fill();

this.pixelContext.beginPath();
this.pixelContext.arc(x, y, this.radius1.7, 0, 2Math.PI, false);
this.pixelContext.lineWidth = 6;
this.pixelContext.strokeStyle = this.line_color;
this.pixelContext.fillStyle = decimalToHex(color);
this.pixelContext.stroke();
this.pixelContext.fill();

right now is it only drawing ctx, when i switch between ctx and pixelContext in the declaration, it only draws pixelContext.

thanks in advance!


#2

Your basic code works fine for me, but when I first copied/pasted it I had a console error regarding missing decimalToHex.

Have you checked your browser console for errors?


#3

its only a part of the code, the code itself is quite large. anyway, it seems i just didn’t know enough about canvas, i thought the two canvases would overlap but instead the browser just places them at different places. thx anyway


#4

You can overlay canvas elements - they follow any CSS you’ve applied.