Introduction to HTML5

Size: px

Start display at page:

Download "Introduction to HTML5"

Hilary Norman
6 years ago
Views:

1 Introduction to HTML5 Creating Lines, Rectangles, Setting Colors, Gradients, Circles and Curves By Dana Corrigan

2 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: If you re a Windows user, Komodo Edit is a fine alternative:

3 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.

4 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.moveto(x1,y1); context.lineto(x2,y2); - 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. - 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:

lineto(x2,y2); ////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ }; </script> </head> <body> <canvas id= mycanvas width= 800 height= 600 ></canvas>

5 Lines <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var canvas = document.getelementbyid( mycanvas ); var context = canvas.getcontext( 2d ); ////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ var x1 = 50; var y1 = 100; var x2 = 300; var y2 = 450; context.moveto(x1,y1); context.lineto(x2,y2); ////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ }; </script> </head> <body> <canvas id= mycanvas width= 800 height= 600 ></canvas> </body> </html> 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.

6 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.

7 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

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.

8 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 lines You 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.moveto(x1,y1); context.lineto(x2,y2); context.linewidth = 20; context.linecap = round ; context.strokestyle = red ; 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.

9 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 = white while = 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 go E D C B A 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

10 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.

11 Rectangles So now lets start talking about Rectangles. Here is a simple code for writing Rectangles, before we add any bells and whistles: context.rect(x, y, width, height); 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.

12 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.rect(x, y, width, height); context.linewidth = 10; context.strokestyle = rgb(150, 150, 150) ; - this will make the stroke color a Mid-tone Grey So your current code would look like this, and the image to the right is what you would see on the internet browser if you save the document and reopen in Firefox. <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var canvas = document.getelementbyid( mycanvas ); var context = canvas.getcontext( 2d ); ////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ var x = 100; var y = 100; var width = 500; var height = 300; context.rect(x, y, width, height); context.linewidth = 10; context.strokestyle = rgb(150, 150, 150) ; ////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ }; </script> </head> <body> <canvas id= mycanvas width= 800 height= 600 ></canvas> </body> </html>

13 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 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 in that it will automatically fill the rectangle 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.rect(x, y, width, height); context.linewidth = 10; context.fillstyle = rgb(210, 210, 210) ; context.fill(); context.strokestyle = rgb(150, 150, 150) ;

14 Circles CIRCLES Just like with the rectangle and line, a circle requires the and (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 circle 0 = starting angle 2 * Math.PI = ending angle; false = means that the circle is being drawn clockwise. True means you re drawing the circle counter-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 circle, then make your number lower than 2 x Math.PI * Math.PI = Ending Angle radius = Starting Angle (centerx, centery) fal se = Pat h i s d r lo aw n C c i kw se

15 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 respectively. <!DOCTYPE HTML> <html> <head> <script> window.onload = function() { var canvas = document.getelementbyid( mycanvas ); var context = canvas.getcontext( 2d ); ////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ var centerx = canvas.width/2; var centery = canvas.height/2; var radius = 200; context.arc(centerx, centery, radius, 0, 2*Math.PI, false); ////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ }; </script> </head> <body> <canvas id= mycanvas width= 800 height= 600 ></canvas> </body> </html>

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.

16 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. var centerx = canvas.width/2; var centery = canvas.height/2; var radius = 200; context.arc(centerx, centery, radius, 0, Math.PI, false); If you change false to true, it will reverse the drawing of the circle. var centerx = canvas.width/2; var centery = canvas.height/2; var radius = 200; context.arc(centerx, centery, radius, 0, Math.PI, true); Lets try dividing the ending angle by 2, so instead of 2*Math.PI, you have Math.PI/2: context.arc(centerx, centery, radius, 0, Math.PI/2, false); Again, if we change false to true, it will reverse the angle that the circle is drawn. context.arc(centerx, centery, radius, 0, Math.PI/2, true);

17 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 otherwise it will not show up. Here is the code for the previous 3/4 circle, with the empty space closed: var centerx = canvas.width/2; var centery = canvas.height/2; var radius = 200; context.arc(centerx, centery, radius, 0, Math.PI/2, true); context.closepath();

18 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 GRADIENT The 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 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 ending 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.

19 Gradients 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.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(); (startx, starty) (200, 300) This is our imaginary line. Offset = 0 means that the first color - light green begins right at the starting point of our invisible line. (endx, endy) (600, 300) Offset = 1 means that the second color dark green - is located right at the ending point of our invisible line. 800

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(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.

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.

20 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.

21 Gradients (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:

arc(centerx, centery, radius, 0, Math.PI/2, true); var grd = context.

22 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.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();

23 Gradients RADIAL GRADIENT The 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.

24 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.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();

25 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 something curvy and organic? Let s start with custom drawings that can be made from lines, and create a Triangle Starting point for the first line... ending point for the last line End point for the second line. Starting point for the third line. End point for first line. Starting point for the second line 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.

Custom Shapes Here is the code, with the numbers typed right in (no variables): context.moveto(400, 100); context.lineto(600, 500); context.lineto(200, 500); context.

26 Custom Shapes Here is the code, with the numbers typed right in (no variables): context.moveto(400, 100); context.lineto(600, 500); context.lineto(200, 500); context.lineto(400, 100); *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 and You can also change the line width, stroke color and fill color as you would with a rectangle or circle. 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) ;

27 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 Photoshop, 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.moveto(x1, y1); context.quadraticcurveto(controlx, controly, endx, endy); 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.

28 Custom Shapes BEZIER CURVE A 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.moveto(x1, y1); context.beziercurveto(controlx1, controly1, controlx2, controly2, endx, endy); Control Point 1 Ending X and Y Starting X and Y Control Point 2

29 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.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) ;

Web Programming 1 Packet #5: Canvas and JavaScript

Web Programming 1 Packet #5: Canvas and JavaScript Name: Objectives: By the completion of this packet, students should be able to: use JavaScript to draw on the canvas element Canvas Element. This is a