sendesignz

Drawing on the Canvas

HTML5 canvas element lets developers create images and animations in the browser using JavaScript. We can use the canvas to create simple or complex shapes without resorting to server-side libraries, Flash, or other plug-ins. In this tutorial we will see how to access the canvas element,  draw basic Shapes and change colors.

 


First we'll get familiar with how we use JavaScript and the canvas element together by drawing some simple shapes.

 

The canvas element is a container element much like the script element. It's a blank slate we can draw on. We define a canvas with a width and height like this:

<canvas id="my_canvas" width="900" height="300">

Fallback content here

</canvas>

Learning about 2D context

The canvas’s 2D context is a grid, with the top-left corner as the default origin. When you create a shape, you specify the starting X and Y coordinates and the width and height.


We use JavaScript to put shapes on the canvas. Even if you provided fallback content to those browsers without the canvas element, you still need to prevent the JavaScript code from trying to manipulate it. Find the canvas by its ID, and see whether the browser supports the canvas getContext method.

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

var context = canvas.getContext('2d');

}else{

// do something to show the canvas' hidden contents

// or let the browser display the text within the <canvas> element.

}


If we get a response from the getContext method, we grab the 2D context for the canvas so we can add objects. If we don’t have a context, we need to devise a way to display the fallback content. Since we know that the canvas element requires JavaScript in order to work, we’re building a framework to handle fallbacks from the beginning. Once you have the canvas context, you simply add elements to that context.

 

Accessing the 2d rendering context

Let's start by creating a new HTML5 document, adding a canvas element to the page, and then creating a JavaScript function for drawing, which detects whether we can use the 2D canvas.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

 

var drawLogo = function(){

var canvas = document.getElementById('my_canvas');

var context = canvas.getContext('2d');

 

context.fillStyle = "rgb(200,0,0)" ;

context.fillRect (10, 10, 100, 100);

};

 

$(function(){

var canvas = document.getElementById('my_canvas');

if (canvas.getContext){

drawLogo();

}

});

</script>

</head>

 

<body>

<canvas id="my_canvas" width="900" height="300">

Fallback content here

</canvas>

</body>

</html>

  • The fillStyle Property fill the color
  • The fillRect property will draws a rectangle that’s filled in a colour by default is Black


Notice here we’re using the jQuery function again to ensure that the event fires when the document is ready. We’ r e looking for an element on the page with the ID of my_canvas, so we’d better make sure we add our canvas element to the document so it can be found, and our detection will work.

Result




Each shape is added onto its own layer, so you could create three boxes with a 10-pixel offset, like this:

context.fillStyle = "rgb(200,0,0)" ;

context.fillRect (10, 10, 100, 100);

context.fillStyle = "rgb(0,200,0)" ;

context.fillRect (20, 20, 100, 100);

context.fillStyle = "rgb(0,0,200)" ;

context.fillRect (30, 30, 100, 100);


Result



Adding Text

Adding text to the canvas involves choosing a font, a font size, and an alignment, and then applying the text to the appropriate coordinates on the grid. We can add the text'Sendesignz' to our canvas like this:

context.font = 'italic 40px sans-serif';

context.textBaseline = 'top';

context.fillText('Sendesignz', 60, 0);


Result



Drawing Lines

We draw lines on the canvas by playing a game of 'connect-the-dots.' We specify a starting point on the canvas grid and then specify additional points on the grid to move to. As we move around the canvas, the dots get connected

 

Drawing a Rectangle

context.lineWidth = 3;

context.beginPath();

context.moveTo(0, 100);

context.lineTo(100,0);

context.lineTo(200, 100 );

context.lineTo(0, 100 );

context.stroke();

context.closePath();


Result



Drawing a Box

context.lineWidth = 3;

context.beginPath();

context.moveTo(0, 100);

context.lineTo(100,0);

context.lineTo(200, 100 );

context.lineTo(100, 200 );

context.lineTo(0, 100 );

context.stroke();

context.closePath();


Result

lineWidth - change the width of a stroked outline
beginPath - starts a new path
moveTo - moves the point that the path is drown from
lineTo - drows a straight path to this point from the point defined in moveTo, or the point from the last call to lineTo.

When we're all done moving around the canvas, we have to call the stroke method to draw the line and then call the closePath method to stop drawing.

 

Using Fill Method  to create a illusion

context.translate(20,20);

context.fillRect(0,0,100,100);

context.fillStyle = '#fff';

context.strokeStyle = '#fff';

context.lineWidth = 2;

context.beginPath();

context.moveTo(0, 100);

context.lineTo(50, 0);

context.lineTo(100, 100 );

context.lineTo(0, 100 );

context.fill();

context.closePath();


Result

context.translate(x, y) is to add the translation transformation to the transformation matrix. The x and y arguments represent the translation distance in the horizontal direction and in the vertical direction. The arguments are in coordinate space units

Adding Solid Color

In the previous Examples, you saw briefly how to set the stroke and fill color for the drawing tools. We could set the color using the property fillStyle and storkStyle.

context.fillStyle = "#f00" ;

context.strokeStyle = "#f00" ;

Adding Gradiant Color

We can create gradients and assign those to strokes and fills like this:

 var gradient = context.createLinearGradient(0, 0, 0, 60);

gradient.addColorStop(0, '#a00'); // red

gradient.addColorStop(1, '#f00'); // red

context.fillStyle = gradient;

context.strokeStyle = gradient;

 

context.fillRect (10, 10, 100, 100);

context.fill();

context.closePath();


Result

We just create a gradient object and set the color stops of the gradient. In this example, we're just going between two shades of red, but we could do a rainbow if we wanted.

Note that we have to set the color of things before we draw them.

Now we have a better understanding of how we can draw simple shapes on the canvas.

Leave your comments

Post comment as a guest

0
terms and condition.
  • No comments found