Canvas and Drawing Basics
In this content, you will explore the fundamentals of working with Canvas in web development. Learn about using Canvas elements to draw graphics, understanding paths, circles, text, and images in a web page. Discover how to define canvas sizes, draw lines, circles, and more with practical examples and step-by-step instructions. Dive into drawing techniques like moveTo() and lineTo() for creating lines, and arc() for circles. Get hands-on experience in using JavaScript to interact with Canvas for dynamic web graphics and visualizations.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Canvas Element <canvas> Used to draw graphics on a web page - Can draw paths, boxes, circles, text and add images By default, has no border and no content
Canvas Example <canvas id= myCanvas width= 200 height= 100 > </canvas> So it can be referred to by JavaScript Defines the size of the canvas
Notepad: save as CanvasExample.html <html><title>Canvas Example</title><body> </body></html>
Notepad: save as CanvasExample.html <canvas id= myCanvas width= 200 height= 100 > </canvas>
Notepad: save as CanvasExample.html <canvas id= myCanvas width= 200 height= 100 style= border:1px solid #000000; > </canvas> <script> </script>
Draw a line Use the following methods - moveTo(x,y) - defines the starting point of the line - lineTo(x,y) - defines the ending point of the line
Draw a line Define a starting point (0,0), and an ending point (200,100). Use the stroke() method to actually draw the line
Draw a Line var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.strokeStyle = red ; ctx.stroke();
Draw a Circle beginPath() - begins a path arc(x,y,r,startangle,endangle) - creates an arc/curve To create a circle with arc() - Set start angle to 0 and end angle to 2*Math.PI - (x and y parameters define the coordinates of the center of the circle, r parameter defines the radius)
Draw a Circle var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); x axis, y axis, width,height ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();
Canvas Coordinates Canvas is a 2-dimensional grid Upper left corner has coordinates (0,0) Ex. fillRect(0,0,150,75) - Start in upper left corner (0,0) and draws a 150x75 pixel rectangle
Change the Background Color ctx.fillRect(0,0,150,75); - fillRect(x,y,width,height) method draws a rectangle ctx.fillStyle = "#FF0000"; - Fills the drawing object with the color red
Drawing text on the canvas To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text fillText(text,x,y) - draws "filled" text on the canvas strokeText(text,x,y) - draws text on the canvas (no fill)
Using fillText() var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50);
Using fillText() Set font to 30px "Arial" and write a filled text on the canvas:
Using strokeText() Set font to 30px "Arial" and write a text, with no fill, on the canvas:
Using strokeText() var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.strokeText("Hello World",10,100);
Add color and center text Set font to 30px "Comic Sans MS" and write a filled red text in the center of the canvas:
Add color and center text var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Comic Sans MS"; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
TextAlign Start End Left Center Right
Canvas Gradients Gradients can be used to fill rectangles, circles, lines, text, etc.
Canvas Gradients There are two different types of gradients: createLinearGradient(x,y,x1,y1) - creates a linear gradient createRadialGradient(x,y,r,x1,y1,r1) - creates a radial/circular gradient
Canvas Gradients Add two or more color stops using the addColorStop() method - specifies the color stops, and its position along the gradient (anywhere between 0 and 1) To use the gradient, set the fillStyle or strokeStyle property to the gradient, then draw the shape (rectangle, text, or a line).
Using createLinearGradient() Create a linear gradient. Fill rectangle with the gradient:
Using createLinearGradient() var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
Using createLinearGradient() // Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
Using createLinearGradient() // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80);
Using createRadialGradient() Create a radial/circular gradient. Fill rectangle with the gradient:
Using createRadialGradient() var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
Using createRadialGradient() // Create gradient var grd=ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
Using createRadialGradient() // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80);
