Posts

Canvas Transformations part 1

Image
Working with Canvas The Canvas element can be transformed. As an example, a text is written on the canvas at the coordinates (10, 30). ctx. font ="bold 22px Tahoma"; ctx. textAlign ="start"; ctx. fillText ("start", 10, 30); Try It Yourself Result: The  translate(x,y)  method is used to move the Canvas. x indicates how far to move the grid horizontally, and y indicates how far to move the grid vertically. ctx. translate (100, 150); ctx.fillText("after translate", 10, 30); Try It Yourself In this example, the canvas is moved 100px to the right, and 150px down. Result: Canvas has several methods for drawing paths, boxes, circles, text, and adding images
Post a Comment
Read more

SVG vs. Canvas

Canvas vs. SVG Canvas - Elements are drawn programmatically - Drawing is done with pixels - Animations are not built in - High performance for pixels-based drawing operations - Resolution dependent - No support for event handlers - You can save the resulting image as .png or .jpg - Well suited for graphic-intensive games SVG - Elements are part of the page's DOM (Document object model) - Drawing is done with vectors - Effects, such as animations are built in - Based on standard XML syntax, which provides better accessibility - Resolution independent - Support for event handlers - Not suited for game applications - Best suited for applications with large rendering areas (for example, Google Maps) You can actually use both SVG and canvas on the same page, if needed. However, you cannot just draw SVG onto a canvas, or vice-versa.
Post a Comment
Read more

Canvas part 3

Image
Drawing Shapes The  fillRect(x, y, w, h)  method draws a "filled" rectangle, in which w indicates width and h indicates height. The default fill color is black.  A black 100*100 pixel rectangle is drawn on the canvas at the position (20, 20): var c=document.getElementById("canvas1"); var ctx=c.getContext("2d"); ctx. fillRect (20,20,100,100); Try It Yourself Result: The  fillStyle  property is used to set a color, gradient, or pattern to fill the drawing. Using this property allows you to draw a green-filled rectangle. var canvas=document.getElementById("canvas1"); var ctx=canvas.getContext("2d"); ctx.fillStyle ="rgba(0, 200, 0, 1)"; ctx.fillRect (36, 10, 22, 22); Try It Yourself Result: The canvas supports various other methods for drawing: Draw a Line moveTo(x,y): Defines the starting point of the line. lineTo(x,y): Defines the ending point of the line. Draw a Circle beginPath(): Starts the drawing. arc(x,y,r,start,s...
Post a Comment
Read more

Canvas part 2

Image
COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS Canvas 18 2/3           Canvas Coordinates The HTML canvas is a two-dimensional grid. The upper-left corner of the canvas has the coordinates (0,0). X coordinate increases to the right. Y coordinate increases toward the bottom of the canvas. The  <canvas>  element is only a container for graphics.
Post a Comment
Read more

Canvas part 1

Image
RSES CODE PLAYGROUND DISCUSS TOP LEARNERS Canvas 18 1/3           The <canvas> Element The HTML canvas is used to draw graphics that include everything from simple lines to complex graphic objects. The  <canvas>  element is defined by: <canvas id="canvas1" width="200" height="100"> < /canvas > The  <canvas>  element is only a container for graphics. You must use a script to actually draw the graphics (usually JavaScript). The  <canvas>  element must have an  id attribute  so it can be referred to by JavaScript: <html> <head> </head> <body> <canvas id ="canvas1" width="400" height="300"> </canvas> <script> var can = document.getElementById("canvas1"); var ctx = can.getContext("2d"); </script> </body> </html> getContext()  returns a...
Post a Comment
Read more

SVG Animations & Paths part 2

Image
Paths The  <path>  element is used to define a path. The following commands are available for path data: M : moveto L : lineto H : horizontal lineto V:  vertical lineto C : curveto S : smooth curveto Q : quadratic Bézier curve T : smooth quadratic Bézier curveto A:  elliptical Arc Z : closepath Define a path using the  d  attribute: <svg width="500" height="500"> < path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000; fill:none;" /> </svg> Try It Yourself M places our "virtual pen" down at the position 0, 0. It then moves 200px down and to the right, then moves up to the position 200, 0. The Z command closes the shape, which results in a hypotenuse: All of the above commands can also be expressed with lower case letters. When capital letters are used, it indicates absolute position; lower case indicates relative position.
Post a Comment
Read more

SVG Animations & Paths part 1

Image
COURSES CODE PLAYGROUND DISCUSS TOP LEARNERS SVG Animations & Paths 17 1/2       Shape Animations SVG animations can be created using the  <animate>  element.  The example below creates a rectangle that will change its position in 3 seconds and will then repeat the animation twice: <svg width="1000" height="250"> <rect width="150" height="150" fill="orange"> <animate attributeName="x" from="0" to ="300" dur ="3s" fill ="freeze" repeatCount ="2"/> </rect> </svg> Try It Yourself attributeName : Specifies which attribute will be affected by the animation from : Specifies the starting value of the attribute to : Specifies the ending value of the attribute dur : Specifies how long the animation runs (duration) fill : Specifies whether or not the attribute's value should return to it...
Post a Comment
Read more