Introduction to HTML5 - sapphiredragonstudios.comIntroduction to HTML5 Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves By Dana Corrigan. Intro This document

Introduction to HTML5Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves

By Dana Corrigan

Intro

This document is going to talk about the basics of HTML, beginning with creating primitive shapes (lines, rectangles, circles) then move on to more complex, custom shapes using curves.

So first off, what is HTML? - HTML stands for “HyperText Markup Language.” It is the main language (though not the only one) used in creating a website.

For this demonstration, we’re going to be creating graphics using the same code that one would make a website with.

What’s the point of creating graphics with code? - The logic used by HTML is the same as used by vector-based software such as Adobe Illustrator. Ideally, by having a strong grasp of what you’re telling the code to do, the transition to using vector software should feel more seamless. Essentially, once we start working with Illustrator, it should feel easier, as now Illustrator will be handling the pesky code while drawing the graphics for you. Where this will really help is in understanding one of Illustrator’s most useful (and, to beginners, what feels like the most complicated) tool - The Pen Tool - which is used to draw curves. But we’ll worry about Curves later. First, lets draw some lines.

The program we’re using to create the code is called Text Wrangler. You can download it here:http://www.barebones.com/products/textwrangler/download.html

If you’re a Windows user, Komodo Edit is a fine alternative:http://www.activestate.com/komodo-edit/downloads

Intro

Before we can draw anything, we need to create an HTML shell:

<!DOCTYPE HTML><html><head><script>window.onload = function() {var canvas = document.getElementById(“myCanvas”);var context = canvas.getContext(“2d”);

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script></head><body><canvas id=”myCanvas” width=”800” height=”600”></canvas></body></html>

The above lines of code essentially set up our web page. Anything we’re going to add will be in between the “start below this line” and “end above this line.”

So how big is our Canvas? The size of the canvas is determined near the bottom of the shell, in this line of code:<canvas id=”myCanvas” width=”800” height=”600”></canvas>

This indicates that the canvas is 800px wide, and 600px tall. If we want to adjust the height and width of our canvas, we can simply do it by changing the numbers in this line of code.

Why is the size of the canvas important? The canvas size is the same concept as having a sketch book, a paintng canvas or a piece of paper. It’s your drawing space. If you draw a graphic outside of the canvas, it simply won’t show up. It’s the literal equivalent of drawing on a table right next to your sketch book, then picking up your empty sketchbook to show off your drawing. It’s on the table, silly! Not in your sketch book.

Lines

Lets start with a line. There are 4 lines of code that make up a single drawn line. Here is the code placed all together, followed by an explanation of what each piece means:

context.beginPath();context.moveTo(x1,y1);context.lineTo(x2,y2);context.stroke();

context.beginPath(); - This says I’m going to draw something. This is the starting point.

context.moveTo(x1,y1); - This takes an imaginary pointer and says “go ahead and, inside of your canvas, move to the coordinates “x” and “y” and start your line from there.

context.lineTo(x2,y2);- Create a line from the beginning point and draw it to the ending point. context.stroke();- Makes the line visible.

X, y, x1 and y1 are what’s called “variables.” They’re letters that represent numbers.

Remember from Algebra?5x = y If x is 1, what is y? 5. The variables allow us to change the numbers and also even replace the numbers with mathematical equations. We’ll get to that more later.

Now when referencing “x” and “y,” in this case we’re thinking about the x and y coordinates on the grid. But we don’t –have- to call the variables “x” and “y”, we could call them “fruit” and “vegetables” if we wanted to.

We could also just use numbers instead of variables, which is OK but it’s good to get into the habit of using variables because it gets easier to reference them when using complex code.

So what we want to do now is create the variables that the above code is calling for. Creating variables should look like this:

var x1 = 50;var y1 = 100;var x2 = 300;var y2 = 450;

Where you establish your variables doesn’t matter so long as they’re established before the code calls for it. Which means that the lines of code for your variables should be above the codes that call them.

Your whole code should now look like this:

Lines



var x1 = 50;var y1 = 100;var x2 = 300;var y2 = 450;

context.beginPath();context.moveTo(x1,y1);context.lineTo(x2,y2);context.stroke();


};


If you save your file now, by going to File>Save or hitting Command+S on your keyboard, you can open your file in Firefox by locating wherever you saved it onto the hard drive and opening it.

Lines

Below is a screen shot of the code inside of Text Wrangler, followed by a screenshot of the line itself. It’s okay if your line looks different, if the numbers you’ve placed are different. If no line shows up at all, it likely means that the code is broken. Check your code for any mispellings (contect instead of context), that capitalizations are correct (Moveto instead of moveTo), all open brackets and quotation marks are closed, and that all punctuation is what it should be (no ‘,’s instead of ‘.’s, etc.) The syntax is very sensitive, and those are the most common mistakes I see.

(50, 100) Our beginning point, as directed by our “context.moveTo” code.

(300, 450) Our ending point, as directed by our “context.lineTo” code.

Lines

But wait! Why is the line’s beginning point so high on the graph when the Y-coordinate’s only at “50”? The way HTML5 works is that it places the origin point at the top left corner of the graph, not the bottom left as we would often know it. The X-coordinates behave the way we should be used to, from high school math. However, the Y-coordinates are backwards. The higher the number, the lower the image would appear on screen.

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

Lines

Now that we have created our lines, lets give it some properties.

Line Width = This will literally change the thickness of our lines, measured in pixels. context.lineWidth = 5;

Line Color = This will change the color of the stroke (we cannot add a fill to a line. We will do this once we start creating shapes, such as rectangles. context.strokeStyle = “blue”; <- There are 3 ways to determine the colors, which we will review shortly. Line Cap = What the very end of the line looks like.Allows you to round the edge of your linesYou have three options - “Round”, “Butt” and “Square.” Choose one of them. “Butt” is the default. “Square” is simply a slightly extended version of “Butt”, both end with squarish shapes. “Round” literally ends the line with a rounded shape. context.lineCap = “round”; context.lineCap = “butt”; context.LineCap = “square”;

The code should be below the drawing itself (“context.lineTo”) but above the “context.stroke” Below is a snippet of the code, along with the visible changes to the line itself.

context.beginPath();context.moveTo(x1,y1);context.lineTo(x2,y2);context.lineWidth = 20;context.lineCap = ‘round’;context.strokeStyle = ‘red’;context.stroke();

It doesn’t matter what order Line Width, Line Cap or Stroke Style are defined, so long as it’s above the “context.stroke();” code and below the “context.lineTo” code.

Colors

Now what happens if you want a specific shade of a color? What about “pastel baby blue”? Or “blood red”? There are limitations in referring to the colors just by names, because not all of the colors have obvious names.

There are two ways to identify color:1. By word, like “blue”.2. By Hexidecimal

Any computer monitor identifies colors using an additive color scheme called RGB, which stands for Red, Green, Blue

Color R = 1 byte = 8 bits = 255 (the number will be anywhere between 0-255) G = 1 byte = 8 bits = 255 (anywhere between 0-255) B = 1 byte = 8 bits = 255 (anywhere between 0-255)

Each channel is one byte. RGB = 3 channels.

That is what the term “8-bit color” comes from.

The hexadecimal refers to the three color numbers placed side-by-side. Imagine the Red, Green and Blue numbers being treated like slides. 255+255+255 = white while 0+0+0 = black. The higher the number, the more of that color you add.

When you get higher than 9, the numbers will be replaced with letters

F - This is the highest the number can goEDCBA987654321

Here is an xample of what a Hexidecimal code would look like: #FF00FF R G B

The image to the right is a list of web colors, along with their Hexadecimal code. The hard part about Hexadecimals is that it’s not very intuitive, which makes it hard to remember.

Image is taken from VisiBones, at “html-color-codes.com”

Colors

PANTONE colors have a Hexidecimal value to ensure that you’re using the right color/same colors on every computer. Sometimes different monitors will show colors different, and companies/clients can be very particular with their colors. PANTONE ensures that you will be using the correct colors and that they will print consistently regardless of what computers you used for the project and what the colors might look like on screen. If you’re ever working on a project on Photoshop, InDesign or Illustrator and a company has set colors for you, you can insert their Hexadecimal values and ensure that what will be printed in the end is exactly what they use for their websites and for their Corporate Identities.

However, we no longer have to use Hexadecimal values when working with HTML5. There is a new method developed specifically for HTML5 which is much more intuitive. It’s called RGB NOTATION

The code for it is “rgb(###,###,###)”Each number is anywhere between 0-255, and each number corresponds to the letter.RGB is an ADDITIVE color scheme. The higher the numbers, the brighter it is. If all three values are 255, the final color would be WHITE. If the three values are each 0, the final color would be BLACK.So if we wanted to get the same red as before, we would use rgb(255, 0, 0);

Lets compare the codes:context.strokeStyle = ‘red’;context.strokeStyle = ‘rgb(255, 0, 0)’;context.strokeStyle = ‘#ff0000’;Any of these would end up with “Red” as the final color.

If we wanted Blue for our color:context.strokeStyle = ‘blue’;context.strokeStyle = ‘rgb(0, 0, 255)’;context.strokeStyle = ‘#0000ff’;

For the duration of this demonstration, I will be using the RGB Notation, but you may use any of these three color methods.

Rectangles

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

So now lets start talking about Rectangles.

Here is a simple code for writing Rectangles, before we add any bells and whistles:

context.beginPath(); context.rect(x, y, width, height); context.stroke();

Below is a drawing of the rectangle, along with what each variable represents.

Don’t forget to replace the variables with numbers, or define the variables above the code. The variables can’t be called if they’re not defined!

Rectangles

Now lets add some bells and whistles, starting off with what we already know - Line Width and Stroke Color. Line Cap wouldn’t be helpful here because this is a complete shape.

context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 10; context.strokeStyle = ‘rgb(150, 150, 150)’; - this will make the stroke color a Mid-tone Grey context.stroke();

So your current code would look like this, and the image to the right is what you would see on the inter-net browser if you save the document and reopen in Firefox.



var x = 100;var y = 100;var width = 500;var height = 300;

context.beginPath();context.rect(x, y, width, height);context.lineWidth = 10;context.strokeStyle = ‘rgb(150, 150, 150)’;context.stroke();


};


Rectangles

Now, lets fill the rectangle with color. If you are filling a rectangle with color, the fill codes will need to be above the “context.stroke();” code or otherwise the fill will over the stroke. Also, if you have a fill you don’t have to have a stroke unless you want there to be one.

There are two pieces of code that are needed for a fill:

context.fill(); <-this is the same concept as “context.stroke();” in that it will automatically fill the rectan-gle with black, unless you add a style code that specifies what color you want.

Lets change the fill color to a brighter grey than its stroke:

context.fillStyle = ‘rgb(210, 210, 210)’;context.fill();

Here is a sample of the code all together (excluding the defined variables and the shell, and what the rectangle would look like

context.beginPath();context.rect(x, y, width, height);context.lineWidth = 10;context.fillStyle = ‘rgb(210, 210, 210)’;context.fill();context.strokeStyle = ‘rgb(150, 150, 150)’;context.stroke();

Circles

CIRCLESJust like with the rectangle and line, a circle requires the “context.beginPath();” and “context.stroke();” (or “context.fill()” if you want a shape that has a fill color, but no stroke). Below is the circle code, by itself, with a breakdown of what it means:

context.arc(centerX, centerY, radius, 0 , 2 * Math.PI, false);

centerX = starting x coordinate.centerY = starting y coordinate Unlike rectangles, the circles starting points are in the center of the shape, not at a ‘corner’Radius = width of the circle0 = starting angle2 * Math.PI = ending angle;false = means that the circle is being drawn clockwise. True means you’re drawing the circle count-er-clockwise.

Pi is 3.14 and is equal to half of a circle. So 2 x Pi = a whole circle. If you want to use a piece of a cir-cle, then make your number lower than 2 x Math.PI

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

radius

(centerX, centerY)

0 = Starting Angle

2 * Math.PI = Ending Angle

false = Path is drawn Clockwise

Circles

Here is an example of the entire code. For the centerX and centerY variables, I literally defined them as being in the ‘center’ of the canvas, by using the canvas.width and canvas.height variables. The advatange of this is that, if I were to change the canvas size, the circle would always be right in the center. This is also known as ‘Relaive Positioning.’ The position of the circle is relative to the height and width of the canvas.

This can also be helpful if you wanted to have a different background ‘color’ other than white. You could just make a rectangle that starts at the origin, and with the width and height being “canvas.width” and canvas.height” respective-ly.



var centerX = canvas.width/2;var centerY = canvas.height/2;var radius = 200;

context.beginPath();context.arc(centerX, centerY, radius, 0, 2*Math.PI, false); context.stroke();


};


Circles

So what if we want to draw part of a circle, instead of the whole thing? You would want to change either the starting angle or ending angle numbers. For example, if you change the ending angle to Math.PI instead of 2*Math.PI, you’ll draw a half circle.


context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI, false); context.stroke();

If you change “false” to “true”, it will reverse the drawing of the circle.


context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI, true); context.stroke();

Lets try dividing the ending angle by 2, so instead of 2*Math.PI, you have Math.PI/2:

context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI/2, false); context.stroke();

Again, if we change “false” to “true”, it will reverse the angle that the circle is drawn.

context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI/2, true); context.stroke();

Circles

As of right now, the incomplete circles are visibly incomplete - as in there’s a gap in the stroke between the beginning points and end points. This is perfectly fine when it’s intentional, and often enough it will be. However, what if you wanted to close the space between the starting and ending points? This applies not only to incomplete circles, but any incomplete shape (which we will be working on custom shapes shortly).

All we need is: context.closePath();This code must appear before “context.stroke();” otherwise it will not show up.

Here is the code for the previous 3/4 circle, with the empty space closed:


context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI/2, true); context.closePath();context.stroke();

Gradients

Now lets fill our incomplete circle with color. However, instead of filling it with a flat, solid color, lets create a gradient. A gradient is when there is a gradiation of color from one point to another. There are two types of gradients - Linear and Radial. We will start with Linear, which is the simpler of the two.

LINEAR GRADIENTThe gradient consists of an imaginary line.The first point of the line is the starting color. The second point is the ending color.

First, the gradient has to be defined as a variable. We can place this variable right in the middle of the code, above the “context.stroke();” code. var grd = context.createLinearGradient(startX, startY, endX, endY);

Now that we have added the grd variable, we need to add (at least) two properties. These will determine the two (or more) colors that the gradient will contain. grd.addColorStop(offset, color); grd.addColorStop(offset, color);The offset must be between 0 and 1. Think of 0 as being 0%, and 1 as being 100%. This will make more sense once we can see it.

Once we create the grd variable, we need to call it. We will use the variable to define the fill style of our circle: context.fillStyle = grd;

Finally, we need to actually fill the circle. context.fill();

Offset refers to the proportion of your line. The number can only be between 0 and 1 (including 0 and 1). 0 is the starting color, which will start at the very beginning of the imaginary line, 1 is the end-ing color, which is placed at the very end of the line.

You’ll need to add another color stop so there will be a starting and ending point - you always need at least two grd.addColorStop(offset, color); codes But you may also add as many color stops in between as you want.

So lets plug in some numbers, then we’re going to breakdown and examine the visuals.

Gradients

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

var centerX = canvas.width/2;var centerY = canvas.height/2;var radius = 200;var startX = 200;var startY = 300;var endX = 600;var endY = 300;

context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI/2, true); var grd = context.createLinearGradient(startX, startY, endX, endY);grd.addColorStop(0, ‘rgb(220, 255, 220)’);grd.addColorStop(1, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();context.closePath();context.stroke();

This is our imaginary line.(startX, startY)

(200, 300)(endX, endY)(600, 300)

Offset = 0means that the first color - light green - begins right at the starting point of our invisible line.

Offset = 1means that the second color - dark green - is located right at the ending point of our invisible line.

Gradients

What would happen if we changed the light green’s offset to .5?

var grd = context.createLinearGradient(startX, startY, endX, endY);grd.addColorStop(0.5, ‘rgb(220, 255, 220)’);grd.addColorStop(1, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();

What if our dark green’s offset was .5, instead?

var grd = context.createLinearGradient(startX, startY, endX, endY);grd.addColorStop(0, ‘rgb(220, 255, 220)’);grd.addColorStop(.5, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();

Lets add another, red color stop in between the light and dark greens. We’ll keep the light green at 0, dark green at 1, and place the red color stop right in the center, at .5:

var grd = context.createLinearGradient(startX, startY, endX, endY);grd.addColorStop(0, ‘rgb(220, 255, 220)’);grd.addColorStop(0.5, ‘rgb(255, 0, 0)’);grd.addColorStop(1, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();

If you want to change the position of the line - make it diagonal, or vertical, it’s just a matter of changing the grd variable’s Starting X and Y and Ending X and Y coordinates. What if we wanted this exact color scheme coming diagonally, from the top left to the bottom right of the circle?

Lets use the grid to pre-plan the drawing.

Gradients

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

(250, 150) Start X and Y Coordinates

(500, 400) End X and Y Coordinates

Using the above graph as a reference, I’ve predicted that our starting point would need to be (250, 150) and our ending point will need to be (500, 400) in order for the Linear Gradient to fit nicely inside. Lets try it out:

Gradients

var centerX = canvas.width/2;var centerY = canvas.height/2;var radius = 200;var startX = 250;var startY = 150;var endX = 500;var endY = 400;

context.beginPath();context.arc(centerX, centerY, radius, 0, Math.PI/2, true); var grd = context.createLinearGradient(startX, startY, endX, endY);grd.addColorStop(0, ‘rgb(220, 255, 220)’);grd.addColorStop(.5, ‘rgb(255, 0, 0)’);grd.addColorStop(1, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();context.closePath();context.stroke();

Gradients

RADIAL GRADIENTThe gradient consists of two circles. Usually a circle within a circle. Now there CAN be a circle placed outside of a circle but ONLY through code. It’s not possible to do it that way in Illustrator as of yet.

The code is very similar to a Linear Gradient, except for the variable being defined.A Radial Gradient requires a central radius, start point, end point and end radius:

var grd=context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius); grd.addColorStop(offset, color); grd.addColorStop(offset, color); context.fillStyle = grd; context.fill();

Lets use a Rectangle this time, and fill it with a radial gradient.

Gradients

var x = 0;var y = 0;var width = canvas.width;var height = canvas.height;var startX = 250;var startY = 250;var startRadius = 100;var endX = 300;var endY = 400;var endRadius = 400;

context.beginPath();context.rect(x, y, width, height); var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);grd.addColorStop(0, ‘rgb(220, 255, 220)’);grd.addColorStop(1, ‘rgb(0, 100, 0)’);context.fillStyle = grd;context.fill();context.closePath();context.stroke();

Custom Shapes

Thus far, we’ve only been working with primitive shapes - rectangles, circles, lines. What if we want to draw our own shapes, such as a triangle, star or even something completely custom? What if we wanted to draw some-thing curvy and organic?

Let’s start with custom drawings that can be made from lines, and create a Triangle.

100 200 300 400 500 600 700 8000

100

200

300

400

500

600600

What is a TRIANGLE made of? 3 Lines. So all we need to do is draw three lines. The most important part is that we need these lines to connect. They have to all be treated as part of one big shape, and not just individual lines. Otherwise, if we try to fill it in, we’ll run into problems.

When drawing your Triangle, imagine that you can’t lift your pen from the paper. Your starting point for the Triangle will need to be your ending point, ultimately.

Starting point for the first line...ending point for the last line

End point for first line. Starting point for the second line

End point for the second line. Starting point for the third line.

Custom Shapes

Here is the code, with the numbers typed right in (no variables):

context.beginPath();context.moveTo(400, 100);context.lineTo(600, 500);context.lineTo(200, 500);context.lineTo(400, 100);context.stroke();

*Although a line begins with a “moveTo” code, when drawing a shape you only need the “moveTo” code ONCE. NOT for every single line that makes up the shape. Keep all of the code in between the “context.beginPath();” and “context.stroke();”

You can also change the line width, stroke color and fill color as you would with a rectangle or circle.

context.beginPath();context.moveTo(400, 100);context.lineTo(600, 500);context.lineTo(200, 500);context.lineTo(400, 100);context.lineWidth = 5;context.fillStyle = ‘rgb(200, 200, 255)’;context.fill();context.closePath();context.strokeStyle = ‘rgb(100, 100, 255)’;context.stroke();

Custom Shapes

CURVES

Curves take a little time to understand, but once you have a mastery over curves, you can pretty much draw anything. Also, the “Pen Tool”, which is one of the most useful and necessary tools in Adobe Pho-toshop, Flash, InDesign and especially Illustrator follows this same logic.

When drawing a Curve, conceptually it’s the same as drawing a line. The difference is the addition of one or two “control points” that help direct the curve. A curve containing a single control point is called a QUADRATIC CURVE. A curve containing two control points is called a BEZIER CURVE.

Here is some sample code for a QUADRATIC CURVE. Remember, it’s only one Control Point that we need:

var x1 = 200;var y1 = 300;var controlX = 400;var controlY = 0;var endX = 600;var endY = 300;

context.beginPath();context.moveTo(x1, y1);context.quadraticCurveTo(controlX, controlY, endX, endY);context.stroke();

A Quadratic Curve requires a “moveTo” code just like a line does. Remember, “moveTo” is the starting point - the Equivalent of putting your pen down with the intention of drawing.

Custom Shapes

BEZIER CURVEA Bezier curve is like a quadratic curve except that it has 2 control points instead of just one.

Here is a sample of the code:

var x1 = 100;var y1 = 300;var controlX1 = 200;var controlY1 = 0;var controlX2 = 500;var controlY2 = 600;var endX = 700;var endY = 300;

context.beginPath();context.moveTo(x1, y1);context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);context.stroke();

Control Point 1

Control Point 2

Starting X and Y

Ending X and Y

Custom Shapes

Connecting Curves to make a shape is the same as connecting lines. You only need a single “moveTo” code. After that, you’d make however many lines of code for each Quadratic and/or Bezier curve you’d need, then end with “context.stroke()” (or fill, if you want a filled graphic without a stroke).

Lets create an Infinity Symbol:

var x1 = 0;var y1 = 300;var x2 = 800;var y2 = 300;var controlX1 = 300;var controlY1 = 700;var controlX2 = 350;var controlY2 = 100;var controlX3 = 350;var controlY3 = 700;var controlX4 = 500;var controlY4 = 100;var width = canvas.width;var height = canvas.height;

context.beginPath();context.moveTo(x1, y1);context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, x2, y2);context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, x1, y1);context.lineWidth = 5;context.strokeStyle = ‘rgb(0,255,255)’;context.stroke();

Documents

Introduction to HTML5 - sapphiredragonstudios.comIntroduction to HTML5 Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves By Dana Corrigan. Intro This document