Downloaded 22 times
Uploaded byNisa Soomro
Html5 canvas
The document provides an overview of the HTML5 <canvas> element and how it can be used to draw graphics on a web page. Some key points: - The <canvas> element is used to draw graphics programmatically using JavaScript. It acts as a container for graphics. - Canvas has methods for drawing paths, boxes, circles, text and images. To draw, you first get a 2D drawing context from the canvas element, then use drawing methods like fillRect(), strokeText(), etc. - The canvas uses a 2D grid with (0,0) at the top-left. Shapes can be filled or stroked. Gradients and shadows can also be used. -
More Related Content
Html5 canvas
- 1.
- 2.
- 3. The <canvas> elementis used to draw graphics, on the fly, on a web page. The example shows a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text that is drawn onto the canvas. Wednesday, January 15, 2014 3
- 4. The HTML5 <canvas>element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Wednesday, January 15, 2014 4
- 5. A canvas isa rectangular area on an HTML page, and it is specified with the <canvas> element. The markup looks like this: <canvas id="myCanvas" width="200" height="100"></canvas> Note: By default, the <canvas> element has no border and no content. Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. Tip: You can have multiple <canvas> elements on one HTML page. Wednesday, January 15, 2014 5
- 6. To add aborder, use the style attribute: <canvas id="myCanvas" width="200“ height="100“ style="border:1px solid #000000;"> </canvas> Draw Onto The Canvas With JavaScript <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script> Wednesday, January 15, 2014 6
- 7. First, find the<canvas> element: var c=document.getElementById("myCanvas"); Then, call its getContext() method (you must pass the string "2d" to the getContext() method): var ctx=c.getContext("2d"); The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more. The next two lines draw a red rectangle: ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); Wednesday, January 15, 2014 7
- 8. The fillStyle propertycan be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black). The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style Wednesday, January 15, 2014 8
- 9. <canvas id="myCanvas" width="200“ height="100“ style="border:1pxsolid #000000;"> </canvas> Draw Onto The Canvas With JavaScript <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx. strokeStyle="#FF0000"; ctx. strokeRect(20,20,150,100); </script> Wednesday, January 15, 2014 9
- 10. The canvas isa two-dimensional grid. The upper-left corner of the canvas has coordinate (0,0) So, the fillRect() method above had the parameters (0,0,150,75). This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle. Wednesday, January 15, 2014 10
- 11. To draw straightlines on a canvas, we will use the following two methods: 1. moveTo(x,y) defines the starting point of the line 2. lineTo(x,y) defines the ending point of the line To actually draw the line, we must use one of the "ink" methods, like stroke(). Wednesday, January 15, 2014 11
- 12. Define a startingpoint in position (0,0), and an ending point in position (200,100). Then use the stroke() method to actually draw the line: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); Wednesday, January 15, 2014 12
- 13. To draw acircle on a canvas, we will use the following method: arc(x,y,r,start,stop) To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill(). Wednesday, January 15, 2014 13
- 14.
- 15.
- 16.
- 17. To draw texton a canvas, the most important property and methods are: font - defines the font properties for text fillText(text,x,y) - Draws "filled" text on the canvas (x,y Shows the position where to display text) strokeText(text,x,y) - Draws text on the canvas (no fill) Wednesday, January 15, 2014 17
- 18. Write a 30pxhigh filled text on the canvas, using the font "Arial": var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); Wednesday, January 15, 2014 18
- 19. Write a 30pxhigh text (no fill) on the canvas, using the font "Arial": var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50); Wednesday, January 15, 2014 19
- 20. Gradients can beused to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors. There are two different types of gradients: 1.createLinearGradient(x,y,x1,y1) – Creates a linear gradient 2.createRadialGradient(x,y,r,x1,y1,r1) – Creates a radial/circular gradient Once we have a gradient object, we must add two or more color stops. Wednesday, January 15, 2014 20
- 21. The addColorStop() methodspecifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1. To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line. Wednesday, January 15, 2014 21
- 22. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); Wednesday, January 15, 2014 22
- 23. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Create gradient var grd=ctx.createLinearGradient(0,0,0,200); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); Wednesday, January 15, 2014 23
- 24. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Create gradient var grd=ctx.createLinearGradient(0,0,200,200); grd.addColorStop(0,"red"); grd.addColorStop(1,“black"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); Wednesday, January 15, 2014 24
- 25. Create a radial/circulargradient. Fill rectangle with the gradient: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); Wednesday, January 15, 2014 25
- 26. <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); vargradient=ctx.createLinearGradient(0,0,170,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.lineWidth=5; ctx.strokeRect(20,20,150,100); </script> Wednesday, January 15, 2014 26
- 27. <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30pxVerdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.strokeText("QUEST Nawabshah !",5,80); </script> Wednesday, January 15, 2014 27
- 28. <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30pxVerdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.fillStyle=gradient; ctx.fillText("QUEST Nawabshah !",5,80); </script> Wednesday, January 15, 2014 28
- 29. What is Canvas?What is purpose of canvas? What are advantages and disadvantages of Canvas? Wednesday, January 15, 2014 29
- 30. Draw a Rectanglewith following effect 1. stroke 2. Fill Draw a Rectangle with following effect 1. Stroke Gradient 2. Stroke Fill Gradient Wednesday, January 15, 2014 30
- 31. Draw a Circlewith following effect 1. Stroke 2. Fill Write AnyText with following effect 1. Stroke Gradient 2. Stroke Fill Gradient 3. Stroke 4. Fill Wednesday, January 15, 2014 31
- 32. Draw a Rectanglewith Fill and stroke having following effects 1. Linear Gradient 1. Horizontal, vertical and Diagonal Effect 2. Radial Gradient Wednesday, January 15, 2014 32
- 33.
- 34.
- 35. The shadowColor propertysets or returns the color to use for shadows. Note: Use the shadowColor property together with the shadowBlur property to create a shadow. Tip: Adjust the shadow by using the shadowOffsetX and shadowOffsetY properties. Wednesday, January 15, 2014 35
- 36.
- 37.
- 38.
- 39. The shadowOffsetX propertysets or returns the horizontal distance of the shadow from the shape. shadowOffsetX=0 indicates that the shadow is right behind the shape. shadowOffsetX=20 indicates that the shadow starts 20 pixels to the right (from the shape's left position). shadowOffsetX=-20 indicates that the shadow starts 20 pixels to the left (from the shape's left position). Wednesday, January 15, 2014 39
- 40.
- 41.
- 42. The shadowOffsetY propertysets or returns the vertical distance of the shadow from the shape. shadowOffsety=0 indicates that the shadow is right behind the shape. shadowOffsetY=20 indicates that the shadow starts 20 pixels below the shape's top position. shadowOffsetY=-20 indicates that the shadow starts 20 pixels above the shape's top position. Wednesday, January 15, 2014 42
- 43.
- 44.
- 45. Apply Horizontal andVertical shadow properties on the shapes which are given in practical task of <canvas> Wednesday, January 15, 2014 45
- 46.