HTML5 canvas draw line tutorial - Change width and color

In this tutorial we are going to review how to draw a line, change line widths, change line color, join two lines, define a line cap, etc. If you are not familiar with the HTML5 canvas and its 2d context please review the beginners tutorial - HTML5 canvas tutorial for beginners

CANVAS 2d context methods and attributes that are used in this tutorial
  • beginPath()
    • The beginPath method clears the current path and specifies the beginning of a new path
  • moveTo(x,y)
    • The moveTo method moves the path to the specified point(x,y) in the canvas, without creating a line
  • lineTo(x,y)
    • The lineTo method creates a line from the path's current point to the specified point(x,y) in the canvas
  • stroke()
    • The stroke method paints the current path, with the color set by the strokeStyle attribute, black is default
  • strokeStyle
    • color of the drawing, black is default.
  • lineWidth
    • width of the drawing stroke, 1 is default.
  • lineCap
    • style of the line ending, butt is default. Available choices are butt, round and square.
  • lineJoin
    • style of the line corner, miter is default. Available choices are miter, bevel and round.

Lets draw simple line using canvas from one point to another.

draw line in HTML5 canvas

HTML source code for the above example - myCanvas.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML5 canvas Line Tutorial</title>
<link rel="stylesheet" type="text/css"     href="extjs/resources/css/ext-all.css">
<style type="text/css">
    body {
        margin: 10px 10px 10px 10px;
    }
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>

    <b>HTML5 canvas draw a line tutorial</b> 
    <br></br> 
    <canvas id="myCanvas" width="400" height="200"
        style="border:1px solid #c3c3c3;"> 
        Your browser does not support the HTML 5 canvas element! 
    </canvas>
   
</body>
</html>

JavaScript source code - app.js

Ext.Loader.setConfig({ 
    enabled: true 
});

Ext.application({
   
    name: 'HTML5Canvas',
    appFolder: 'app',
   
    launch: function() {
        var myCanvasElement = document.getElementById("myCanvas");
        var context = myCanvasElement.getContext("2d");
       
        context.beginPath();
        context.moveTo(50,50);
        context.lineTo(300,50);
        context.stroke();
       
        context.beginPath();
        context.moveTo(50,60);
        context.lineTo(300,150);
        context.stroke();
       
    }
});

Above we have created a canvas element and then with the help of the 2d context we have drawn a line from point A to point B. Next let's change the line width.

draw line in HTML5 canvas

Source for canvas line width

        context.beginPath();
        context.moveTo(50,50);
        context.lineTo(300,50);
        context.lineWidth = 5;
        context.stroke();

How to change the line color

draw line in HTML5 canvas

Source for canvas line color

        context.beginPath();
        context.moveTo(50,50);
        context.lineTo(300,50);
        context.lineWidth = 5;
        context.strokeStyle="Orange";
        context.stroke();
       
        context.beginPath();
        context.moveTo(50,70);
        context.lineTo(300,150);
        context.lineWidth = 5;
        context.strokeStyle="#FF0000";
        context.stroke();

How to specify line Cap
If you don't specify a line cap style the default attribute is "butt". if you specify a "round" or "square" cap style, the length of the line will increase by an amount equal to the width of the line. For example, if the line width is 20 then it will add 10 on each side as you can see on the image below.

draw line in HTML5 canvas

Source for canvas line Cap styles

        context.beginPath();
        context.moveTo(50,50);
        context.lineTo(300,50);
        context.lineWidth = 20;
        context.lineCap = "butt";
        context.stroke();
       
        context.beginPath();
        context.moveTo(50,80);
        context.lineTo(300,80);
        context.lineWidth = 20;
        context.lineCap = "round";
        context.stroke();
       
        context.beginPath();
        context.moveTo(50,110);
        context.lineTo(300,110);
        context.lineWidth = 20;
        context.lineCap = "square";
        context.stroke();

How to join two lines
Default is a miter joint. Two other types of join are round and bevel.

draw line in HTML5 canvas

Source for canvas line join types

        //just to show the top level 
        context.beginPath();
        context.moveTo(10,40);
        context.lineTo(480,40);
        context.stroke();
       
        //just to show the bottom level
        context.beginPath();
        context.moveTo(10,180);
        context.lineTo(480,180);
        context.stroke();
       
        context.beginPath();
        context.moveTo(40,180);
        context.lineTo(40,40);
        context.lineTo(140,180);
        context.lineWidth = 20;
        context.lineJoin = "miter";
        context.stroke();
       
        context.beginPath();
        context.moveTo(180,180);
        context.lineTo(180,40);
        context.lineTo(280,180);
        context.lineWidth = 20;
        context.lineJoin = "round";
        context.stroke();
       
        context.beginPath();
        context.moveTo(320,180);
        context.lineTo(320,40);
        context.lineTo(420,180);
        context.lineWidth = 20;
        context.lineJoin = "bevel";
        context.stroke();

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.