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!