Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Drawing with Javascript

Tuesday, January 28th, 2014 by Servage

smily

The Canvas API includes functions for creating basic shapes (such as strokeRect() for drawing a rectangular outline and beginPath() for starting a line drawing) and moving things around (such as rotate() and scale()), plus attributes for applying styles (for example, lineWidth, strokeStyle, fillStyle, and font).

This example shows the simple smiley face we’ll be creating with the Canvas API.

And here is the script that created it. Don’t worry that you don’t know any JavaScript yet. Just skim through the script and pay attention to the little notes. I’ll also describe some of the functions in use at the end. I bet you’ll get the gist of it just fine.

<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp(){
var theCanvas = document.getElementById('my_first_canvas');
var my_canvas = theCanvas.getContext('2d');
my_canvas.strokeRect(0,0,200,225)
// to start, draw a border around the canvas
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// now, draw left eye
my_canvas.fillStyle = "black"; // switch to black for the fill
my_canvas.beginPath();
my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// now, draw right eye
my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle dimensions
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// draw smile
my_canvas.lineWidth = 6; // switch to six pixels wide for outline
my_canvas.beginPath();
my_canvas.arc(99, 120, 35, (Math.PI/180)*0, (Math.PI/180)*-180, false);
// semicircle dimensions
my_canvas.stroke();
my_canvas.closePath();
// Smiley Speaks!
my_canvas.fillStyle = "black"; // switch to black for text fill
my_canvas.font = '20px _sans'; // use 20 pixel sans serif font
my_canvas.fillText ("Hello Canvas!", 45, 200); // write text
}
</script>

Finally, here is a little more information on the Canvas API functions used in the example:

strokeRect(x1, y1, x2, y2)

Draws a rectangular outline from the point (x1, y1) to (x2, y2). By default, the origin of the Canvas (0,0) is the top-left corner, and x and y coordinates are measured to the right and down.

beginPath()

Starts a line drawing.

closePath()

Ends a line drawing that was started with beginPath().

arc(x, y, arc_radius, angle_radians_beg, angle_radians_end)

Draws an arc where (x,y) is the center of the circle, arc_radius is the length of the radius of the circle, and angle_radians_beg and _end indicate the beginning and end of the arc angle.

stroke()

Draws the line defined by the path. If you don’t include this, the path won’t appear on the canvas.

fill()

Fills in the path specified with beginPath() and endPath().

fillText(your_text, x1, y1)

Adds text to the canvas starting at the (x,y) coordinate specified. In addition, the following attributes were used to specify colors and styles:

lineWidth

Width of the border of the path.

strokeStyle

Color of the border.

fillStyle

Color of the fill (interior) of the shape created with the path.

font

The font and size of the text.

Drawing with Javascript, 3.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.