Skip to main content
R
Rannn
Participant
February 28, 2021
Question

HTML5 canvas lines

  • February 28, 2021
  • 1 reply
  • 134 views

Good evening. 

I am trying to draw a few lines on the html5 canvas.

For starters, I am drawning a simple line, which I typed in the script

 

var canvas = document.getElementById('canvas');
var lines = canvas.getContext('2d');

lines.beginPath();
lines.moveTo(50, 100);
lines.lineTo(200, 50);
lines.stroke();

 

However nothing is showing up.

Inspecting the page shows that the canvas ID is indeed named "canvas":

<canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>

 

What could be wrong here ?

 

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    February 28, 2021

    Hi.

     

    A default canvas with an id of "canvas" is already created in the output.

     

    An approach to draw a line at runtime is to create a Shape instance, use the methods of the Graphics API from CreateJS, and then add the shape to the display list.

     

    Like this:

    var shape = new createjs.Shape();

shape.graphics.beginStroke("blue");
shape.graphics.moveTo(0, 0);
shape.graphics.lineTo(300, 200);
shape.graphics.endStroke();
this.addChild(shape);

     

    I hope this helps.

     

    Regards,

    JC

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices