|
 | OSdata.com |
Draw in HTML5 Canvas is a short tutorial on how to use the features of HTML Canvas. The example file is at canvastest.html. Please feel free to use the example file to copy and paste and experiment.
Step by step instructions:
Building a game — open source code This is the actual source code from a new web game. See the game at thissideofsanity.com and read how this was built starting at example code.
This is example code from the SlamZee project and This Side of Sanity, released under Apache License 2.0.
Copyright 2014 Milo (for software), Distribution and website handled by Strazbick.com
Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
This narrative uses anchor links so that you can follow the building of this software in chronological order. Go to software explanation to start reading. Go to thissideofsanity.com to see the working software.
This is example code from the SlamZee project and This Side of Sanity, released under Apache License 2.0.
Draw in HTML5 Canvas: is a short tutorial on how to use the features of HTML Canvas. The example file is at canvastest.html. Please feel free to use the example file to copy and paste and experiment.
You can go view the canvastest and see the huge mess of drawing that we are going to accomplish to start this tutorial. You can also download that file and use it for your own copy and paste work. The finished mess is also shown below.
Recommended method: is to create your own file. Copy and paste from this page and test items one at a time. You can store the file (plain text, ASCII text) on your desktop and drag it into a Chrome, Safari, or FireFox browser and view your work. You may find that it is useful to delete previous experiments so that you can concentrate on these methods one at a time. Please try messing with the parameters so that you can see the changes and get a better feel for how this all works.
This is a learn by doing tutorial.
Create a canvas tag in the DOM (in the body area of your HTML file):
<html> <html lang="en" dir="ltr"> <head> <title>canvas test</title> </head> <body bgcolor="#ffffff" text="#000000"> <canvas id="mainCanvas" width="640" height="320"></canvas> </body> </html>
This first file will not display anything, but you have to start here to have anything work.
Note that the canvas tag is not styled. If that bothers you, add the following or style away any way you want.
style="margin-left:auto; margin-right:auto; display:block;"
Create a blank area to start dropping in your JavaScript. Normally we would insert this material into well formatted functions and then call the functions appropriately, but I am going to simplify for teaching purposes. Just insert the script area into the body after the canvas tag:
<html> <html lang="en" dir="ltr"> <head> <title>canvas test</title> </head> <body bgcolor="#ffffff" text="#000000"> <canvas id="mainCanvas" width="640" height="320"></canvas> <script> </script> </body> </html>
You need JavaScript to actually create canvas and draw in it. We get the DOM canvas object and assign a 2d drawing context to it.
This step will still not display anything, but we are almost to something you can see.
<script>
/* capture the canvas DOM object */
var workingCanvas = document.getElementById('mainCanvas');
/* set the context */
var workingContext = workingCanvas.getContext('2d');
</script>
We will eventually use these variables. We are setting them at the top so that they are easy to find and adjust.
/* global variables for reused computations */ halfheight = workingCanvas.height / 2; halfwidth = workingCanvas.width / 2; quarterwidth = workingCanvas.width / 4;
Every item in this tutorial is simply placed between the SCRIPT tags, in descending order. That is, keep adding each element directly below the previous experiment. You can clear out previous experiments if they cause too much confusion.
Important Note: If you ever make a mistake, your web browser will probably stop drawing right before the mistake. This will give you a clue about where things have gone wrong. Your web browser may have additional developer tools that can help you debug and correct your experiments.
To draw a line, we tell canvas that we are about to start a new path (do this before each and every individual item drawn), indicate the start point and the end point, and well canvas to draw our line. If we don’t set the line width and color, it will default to one pixel width in black.
If you ever set things like the line width and stroke color, those settings will remain in effect until you issue a new method invocation to change them. Never rely on this default method unless everything always uses the same settings. By always resetting these values, you allow yourself the freedom to change and modify your code over time without having something break because the order of method invocations changed.
/* draw a line */ workingContext.beginPath(); /* start coordinates x,y */ workingContext.moveTo(100,100); /* start point: left, then top */ /* end coordinates x,y */ workingContext.lineTo(500,200); /* end point: right, then bottom */ /* set the width of the line (defaults to one pixel if no lineWidth given)*/ workingContext.lineWidth = 10; /* set the color, hex RGB, defaults to black if no strokeStyle given) */ workingContext.strokeStyle = '#ff0000'; /* red */ workingContext.stroke();
Try different start and end locations. Try different widths. Try different colors.
The colors are the standard RGB hex color codes you have used in ordinary HTML tags for years. There are plenty of RGB color charts on the web.
Now play with the end caps on a line. The following code makes three lines. The top line has “butt” cap (the default). The middle line has “round” cap. And the bottom line has “square” cap.
/* top line with butt (default) cap */ workingContext.beginPath(); workingContext.moveTo(100, ( halfheight - 100) ); workingContext.lineTo( (workingCanvas.width - 300), ( halfheight - 100) ); workingContext.lineWidth = 20; workingContext.strokeStyle = '#0000ff'; /* blue */ workingContext.lineCap = 'butt'; workingContext.stroke(); /* middle line with round cap */ workingContext.beginPath(); workingContext.moveTo(100, halfheight ); workingContext.lineTo( (workingCanvas.width - 300), halfheight); workingContext.lineWidth = 20; workingContext.strokeStyle = '#0000ff'; /* blue */ workingContext.lineCap = 'round'; workingContext.stroke(); /* bottom line with square cap */ workingContext.beginPath(); workingContext.moveTo(100, halfheight ); workingContext.moveTo(100, ( ( workingCanvas.height / 2 ) + 100) ); workingContext.lineTo( (workingCanvas.width - 300), ( halfheight + 100) ); workingContext.lineWidth = 20; workingContext.strokeStyle = '#0000ff'; /* blue */ workingContext.lineCap = 'square'; workingContext.stroke();
Arcs assume an imaginary circle. You provide a start angle (in radians) and an end angle (also in radians). The far right point of the circle is at 0 π. The far bottom point is 0.5 π. The far left point is at 1 π. And the far top point is at 1.5 π. There are charts on the internet that will convert from degrees to radians. Typing xx degrees in radians into Google will give an answer.
You provide the drawing routine with the circle by giving its center point (X, Y) and radius. You then provide the start and end points of the arc (in radians). And finally you give the direction to draw. true will draw clockwise (sunwise or deosil) and false will draw counter-clockwise (widdershins or tuathal).
It isn’t as difficult as that just sounded. Copy and paste the sample, watch it work, then start messing with things to see for yourself how it really works. For your start and end points, use any numbers between 0 and 2, inclusive, multiplied by π.
/* create an arc */ /* giving names to parameters so that it is easy to follow */ var radius = 75; var startAngle = 1.1 * Math.PI /* angles are in radians */ var endAngle = 1.9 * Math.PI /* angles are in radians */ var directionCode = true; /* true = clockwise, false = counterclockwise */ workingContext.beginPath(); workingContext.arc(quarterwidth, halfheight, radius, startAngle, endAngle, directionCode); workingContext.lineWidth = 25; workingContext.strokeStyle = '#ffff00'; /* yellow */ workingContext.lineCap = 'round'; workingContext.stroke();
Your basic quadratic curve has a start point and end point of the curve, plus a control point. The further the control point is away from your start and end points, the sharper your curve.
/* create a quadratic curve */ workingContext.beginPath(); workingContext.moveTo(120, 350); /* start point */ workingContext.quadraticCurveTo(170, 0, 220, 350); /* control point, end point */ workingContext.lineWidth = 5; workingContext.strokeStyle = 'black'; /* black */ workingContext.lineCap = 'square'; workingContext.stroke();
Bezier curves are a little more complicated. They have two control points. If you have ever worked seriously with Adobe Illustrator, then you have been setting these control points.
/* create a bezier curve */ workingContext.beginPath(); workingContext.moveTo(120, 200); /* start point */ workingContext.bezierCurveTo(100, 10, 350, 10, 350, 120); /* bezier: control point 1, control point 2, end point */ workingContext.lineWidth = 5; workingContext.strokeStyle = '#ff8888'; /* pink */ workingContext.lineCap = 'square'; workingContext.stroke();
You can create an arbitrary path by issueing a series of lines, arcs, quadratic curves, and Bezier curves. You can mix and match. You can use this method to describe any curve or path that can be drawn on a flat plane.
/* create a path */ workingContext.beginPath(); /* start point */ workingContext.moveTo(10, 10); /* create a line */ workingContext.lineTo(200, 150); /* quadratic curve */ workingContext.quadraticCurveTo(250, 200, 250, 100); /* bezier curve */ workingContext.bezierCurveTo(300, -50, 330, 200, 400, 150); /* another line */ workingContext.lineTo(500, 100); workingContext.lineWidth = 5; workingContext.strokeStyle = '#888888'; /* gray */ workingContext.lineCap = 'square'; workingContext.stroke();
You can instruct HTML5 Canvas on how you want the lines in a path to be joined. This is most obvious with thick, jagged lines. Your choices are: mitered, round, and beveled. Try the sample and see the three different results.
/* create mitered top */ workingContext.beginPath(); workingContext.moveTo(0, 300); workingContext.lineTo(50, 100); workingContext.lineTo(100, 300); workingContext.lineJoin = 'miter'; workingContext.lineWidth = 25; workingContext.strokeStyle = '#00ff00'; /* bright green */ workingContext.lineCap = 'square'; workingContext.stroke(); /* create round top */ workingContext.beginPath(); workingContext.moveTo(0, 350); workingContext.lineTo(50, 150); workingContext.lineTo(100, 350); workingContext.lineJoin = 'round'; workingContext.lineWidth = 25; workingContext.strokeStyle = '#00aa00'; /* medium green */ workingContext.lineCap = 'round'; workingContext.stroke(); /* create beveled top */ workingContext.beginPath(); workingContext.moveTo(0, 400); workingContext.lineTo(50, 200); workingContext.lineTo(100, 400); workingContext.lineJoin = 'bevel'; workingContext.lineWidth = 25; workingContext.strokeStyle = '#005500'; /* dark green */ workingContext.lineCap = 'square'; workingContext.stroke();
You can use the path to draw a rectangle with rounded corners. The following example only draws the top and right side. Go ahead and extend the experiment to finish the entire rounded rectangle.
/* create rounded corners */ /* set some variables for easy reference */ var rectWidth = 200; var rectHeight = 100; var rectX = 400; var rectY = 20; var cornerRadius = 50; workingContext.beginPath(); workingContext.moveTo(rectX, rectY); workingContext.lineTo( (rectX + rectWidth - cornerRadius), rectY ); workingContext.arcTo( (rectX + rectWidth), rectY, (rectX + rectWidth), (rectY + cornerRadius), cornerRadius); workingContext.lineWidth = 5; workingContext.strokeStyle = 'black'; /* black */ workingContext.lineCap = 'square'; workingContext.stroke();
The next series of experiments go into the various stock shapes. You can make your own paths to create any custom shape you desire.
You can set the fill color and the stroke color for shapes. Always give the fill commands before the stroke commands.
Define a rectangle by the left, top point, followed by the width and height.
/* create rectangle */ workingContext.beginPath(); workingContext.rect(500, 80, 120, 80); /* left, top, width, height */ /* always perform fill before stroke */ workingContext.fillStyle = '#00ffff'; /* cyan */ workingContext.fill(); workingContext.lineWidth= 5; workingContext.strokeStyle = '#ff00ff'; /* magenta */ workingContext.stroke();
We get a little bit fancier here with the circle by using a radial gradient. Note that you can use a radial gradient for any fill, including for rectangles.
Define the shape of the circle by creating an arc that goes from a start point of 0 and ends at 2π.
Define the radial gradient by giving the starting circle and the ending circle. You need at least two stop points. Play with the code and see how it changes as you modify the starting circle, ending circle, and stop point colors.
/* create circle with radiant gradient*/ workingContext.beginPath(); workingContext.arc(420, 80, 50, 0, (2 * Math.PI), false); /* center x, center y, radius, start angle, end angle, direction */ customGradient = workingContext.createRadialGradient(420, 80, 5, 420, 80, 35) /* first circle, second circle --> center Y, center X, radius */ customGradient.addColorStop(0, '#00ffff'); /* zero is first item, dark cyan */ customGradient.addColorStop(1, '#aaffff'); /* one is second item, light cyan */ workingContext.fillStyle = customGradient; workingContext.fill(); workingContext.lineWidth= 5; workingContext.strokeStyle = '#ff00ff'; /* magenta */ workingContext.stroke();
Create a semi-circle by only creating an arc for half a circle and then close the path to run a straight line back to the start point.
/* create semi-circle */ workingContext.beginPath(); workingContext.arc(300, 190, 50, 0, Math.PI, false); /* center x, center y, radius, start angle, end angle, direction */ workingContext.closePath(); workingContext.fillStyle = '#ff0000'; /* red */ workingContext.fill(); workingContext.lineWidth= 5; workingContext.strokeStyle = '#660000'; /* dark red */ workingContext.stroke();
The following example uses a path to create a custom flower shape and then fills it with a linear gradient.
/* create custom shape with gradient */ workingContext.beginPath(); workingContext.moveTo(380, 225); workingContext.bezierCurveTo(340, 245, 340, 295, 440, 295); workingContext.bezierCurveTo(460, 325, 530, 325, 550, 295); workingContext.bezierCurveTo(630, 295, 630, 265, 600, 245); workingContext.bezierCurveTo(640, 185, 580, 175, 550, 195); workingContext.bezierCurveTo(530, 150, 460, 165, 460, 195); workingContext.bezierCurveTo(410, 150, 360, 165, 380, 225); workingContext.closePath(); customGradient = workingContext.createLinearGradient(400, 200, 630, 320) /* left, top, right, bottom */ customGradient.addColorStop(0, '#8888ff'); /* zero is first item, light blue */ customGradient.addColorStop(1, '#112255'); /* one is second item, dark blue */ workingContext.fillStyle = customGradient; workingContext.fill(); workingContext.lineWidth= 5; workingContext.strokeStyle = 'black'; /* black */ workingContext.stroke();
The following code snippet uses a repeating pattern for your will. I do not currently have a pattern available, so you will need to fill in patternfile.png with the URL for a real pattern file.
/* create rectangle with repeating pattern */
var imageObject = new Image();
/* use onload to guarantee that the pattern file has been loaded into the web browser before you draw with it */
imageObject.onload = function() {
var customPattern = workingContext.createPattern(imageObject, 'repeat');
workingContext.rect(10, 350, 100, 200);
workingContext.fillstyle = customPattern;
workingContext.fill();
}
imageObject.src = 'patternfile.png';
Note: This example is not yet in the sample file because I still need to gather a public domain pattern.
You can place an image file into your HTML5 Canvas. This can be an SVG, PNG, JPG, GIF, or a few other formats. Exactly which are available depends on the browser used. You will find a handy chart at Wikipedia. At the time of this writing, Chrome supports JPG, GIF, PNG, some SVG, PDF, XBM, and BMP; Safari supports JPG, JPEG 2000, GIF, PNG, TIFF, some SVG, PDF (Mac only), XMB, and BMP; FireFox supports JPG, GIF, PNG, APNG, some SVG, PDF, and BMP.
Like the case of a repeating pattern, make sure that you need to make sure that the file is completely loaded before you try to draw it.
The example draws the picture with the designated left top corner.
You can resize the picture by adding the desired width and height after the left top coordinates.
You can crop a picture by giving the source (left, top, width, height), followed by the destination (X, Y, width, height).
If you have multiple images, you will want to create a loop that preloads them all.
/* draw an SVG */
var imageObject = new Image();
/* force image to be loaded BEFORE used for drawing */
imageObject.onload = function() {
workingContext.drawImage(imageObject, 220, 200); /* left top */
/* to size image, add width and height after left top */
/* to crop image, give source X, source Y, source width, source height, destination X, dest Y, dest width, dest height */
};
imageObject.src = 'http://www.osdata.com/examplecode/pict/decorations1SVG-MissVickieDOTnet.svg';
/* FREE SVG courtesy of http://cuttingcrazy.wordpress.com/2010/02/23/free-svg-file-decorations-1-swirleys-flowers-heart/ */
/* for multiple images, preload all images */
And the final part of the beginning tutorial is text.
Use the font method to set the style, size, and font family. Each are separated by a space character. Your style options are: normal, italic, or bold. Give the size in points. Remember to use escaping if there are space characters in your font family name.
workingContext.font = 'italic 48pt Helvetica';
Write out simple text with the fillText method. Provide a text string and the X, Y coordinates.
workingContext.fillText('Hello World!!!', 5, 46); /* X, Y */
You can align so that the X, Y point is the start of the text, end, left, center, or right. Use start for left to right and use end for right to left. The default setting is start. Try each.
workingContext.textAlign = 'start'; /* choices are start, end, left, center, and right */
You can set the baseline alignment. The choices are top, hanging, middle, alphabetic, ideographic, and bottom. The default setting is alphabetic. Try each.
workingContext.textBaseline = 'alphabetic'; /* options are top, hanging, middle, alphabetic, ideographic, and bottom */
You can set a fill and stroke color (always set fill first), as well as line width.
The complete code block:
/* add text */ var textString = 'Hello World!!!'; /* going to reuse this item */ workingContext.font = 'italic 48pt Helvetica'; /* style can be normal, italic, or bold SPACE point size SPACE font family */ workingContext.textAlign = 'start'; /* choices are start, end, left, center, and right */ workingContext.textBaseline = 'alphabetic'; /* options are top, hanging, middle, alphabetic, ideographic, and bottom */ workingContext.fillStyle = '#fff8dc'; /* fill color of cornsilk */ workingContext.fillText(textString, 5, 46); /* X, Y */ workingContext.lineWidth = 3; workingContext.strokeStyle = 'black'; /* stroke color */ workingContext.strokeText(textString, 5, 46); /* left top */
You can get the width for a piece of text at the current settings with the measureText method. You can use this to format columns of extended text.
/* we can measure the width of text with measureText() method */ var textMetrics = workingContext.measureText(textString); var textWidth = textMetrics.width; /* we can use this to measure text and create columns of text */
Hopefully that will be enough to get you started. More coming soon (I hope).
OSdata.com is used in more than 300 colleges and universities around the worldFind out how to get similar high web traffic and search engine placement. |
OSdata.com is used in more than 300 colleges and universities around the world |
| Tweets by @osdata |
A web site on dozens of operating systems simply can’t be maintained by one person. This is a cooperative effort. If you spot an error in fact, grammar, syntax, or spelling, or a broken link, or have additional information, commentary, or constructive criticism, please e-mail Milo. If you have any extra copies of docs, manuals, or other materials that can assist in accuracy and completeness, please send them to Milo, PO Box 1361, Tustin, CA, USA, 92781.
Click here for our privacy policy.
 |
 |
| previous page | next page |
This web site handcrafted on Macintosh 
computers using Tom Bender’s Tex-Edit Plus 
and served using FreeBSD 
.
Names and logos of various OSs are trademarks of their respective owners.
Copyright © 2014 Milo
Last Updated: January 16, 2014
Created: January 15, 2014
|
|
| previous page | next page |
