Getting the canvas to draw on top of it

Help & Support
1

Hi, I want to draw some small marks on the screen, and I thought it was possible to get the canvas, use the getContext() method and draw directily with fillRect() for instance.

This is the code:

var canvas = this.app.graphicsDevice.canvas;
var canvasWidth = parseInt(canvas.clientWidth, 10);
var canvasHeight = parseInt(canvas.clientHeight, 10);

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00FF1D";
ctx.fillRect(canvasWidth/2,canvasHeight/2,1,1);
ctx.fillRect(0,0,1,1);
ctx.fillRect(0,canvasHeight,1,1);
ctx.fillRect(canvasWidth,0,1,1);
ctx.fillRect(canvasWidth,canvasHeight,1,1);

However, ctx is NULL.
Does anyone know what I am doing wrong??
Thanks in advance.

2

I have the same question. I want to draw some lines on the HTML canvas. Is it possible to get the 2d Context this way?
For context, I am trying to draw a dashed line in Playcanvas App. I can take the mesh route specified here, but I need to constantly keep scaling the mesh and I don’t know of any way how I can maintain the texel density while scaling the object (The way I know would be computationally expensive)

I am using the new drawLines API but it doesn’t seem to have options for drawing dashed lines either.

Here is the test project I am playing around in: https://playcanvas.com/editor/scene/1253323

Any help would be appreciated :slight_smile:

3

UPDATE:
My guess is, this is the reason getContext(“2d”) returns null

4

I think I found a solution. But would like to know if anyone thinks this could have a huge impact on the performance (specially if I draw multiple of these dashedLines on the same canvas)

Sample project here: https://playcanvas.com/editor/scene/1253323
In case anyone is looking for the same solution in the future :slight_smile:

var DrawDashedLines = pc.createScript('drawDashedLines');

DrawDashedLines.attributes.add("startPoint", {"type": "entity"});
DrawDashedLines.attributes.add("endPoint", {"type": "entity"});

var ctx;

// initialize code called once per entity
DrawDashedLines.prototype.initialize = function() 
{
    SCENE_CAMERA = this.app.root.findByName("SceneCamera").camera;
    
    this.screenStartPosition = new pc.Vec2();
    this.screenEndPosition = new pc.Vec2();
    
    this.createDimensionsCanvas();
    this.drawDashedLine([10, 10], 0, 0, 300, 300);
};

DrawDashedLines.prototype.update = function() 
{
    this.dimensionsCanvas.width = this.app.graphicsDevice.width;
    this.dimensionsCanvas.height = this.app.graphicsDevice.height;
    
    SCENE_CAMERA.worldToScreen(this.startPoint.getPosition(), this.screenStartPosition);
    SCENE_CAMERA.worldToScreen(this.endPoint.getPosition(), this.screenEndPosition);

    this.drawDashedLine([10, 10], this.screenStartPosition.x, this.screenStartPosition.y, this.screenEndPosition.x, this.screenEndPosition.y);
};

DrawDashedLines.prototype.createDimensionsCanvas = function() 
{
    this.dimensionsCanvas = document.createElement('canvas');
    this.dimensionsCanvas.id = "dimensionLinesCanvas";
    this.dimensionsCanvas.width = this.app.graphicsDevice.width;
    this.dimensionsCanvas.height = this.app.graphicsDevice.height;
    this.dimensionsCanvas.style.position = "absolute";
    
    ctx = this.dimensionsCanvas.getContext('2d');
    document.body.appendChild(this.dimensionsCanvas);  
};

DrawDashedLines.prototype.drawDashedLine = function(pattern, startX, startY, endX, endY)
{
    ctx.beginPath();
    ctx.setLineDash(pattern);
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = '#ff0000';
    ctx.stroke();
};
1 Like