HTML5 Game - Drawing Syntax for canvas to draw a line

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Line

Description

Drawing Syntax for canvas to draw a line

Demo

ResultView the demo in separate window 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Canvas Demo</title> 
        <style> 
canvas { //from  w ww .j  a  v a2 s .  c  o m
  border: 1px solid #000; 
  width: 200px; 
  height: 200px; 
} 
        </style> 
    </head> 
    <body> 
      <canvas id="myCanvas"></canvas> 
      <script> 
let myCanvas = document.getElementById('myCanvas'); 
let myContext = myCanvas.getContext('2d'); 
myContext.moveTo(0, 0); 
myContext.lineTo(200, 200); 
myContext.strokeStyle = '#000'; 
myContext.stroke(); 
      </script> 
    </body> 
</html>

Note

This example has a basic canvas element on the page.

It uses CSS to give the canvas dimensions and a border so you can see it.

It uses the moveTo method to move the pen to the upper left corner of the canvas.

Then instructs the context to draw a line (as a path) to the lower right corner at (200, 200).

Last, it sets the stroke style to black and instructs the context to stroke the path.

Related Topic