Part 2: Canvas Text & Shapes on Canvas
Text
- you will open your canvas.html file that you created − → right−click ←on the file and choose to open with sublime (left−click will just open google)
- Once in the file type the following script in image:
- click ctrl−s to save the file
- then → right−click ←in sublime and open in browser − if done right you should see a canvas with a pink background the the text phrase "Hello World!!" in blue
Squares, Lines, & Circles
- For this part we will keep working in the canvas.html file
- Squares − ctx.fillRect(x-loaction, y-location, width, height);
- now add to the script
- Lines require 5 commands
- ctx.strokeStyle = "red"; this sets the color of the line
- ctx.beginPath(); this is telling the computer we are doing a path
- ctx.moveTo(starting x − location, starting y − location)
- ctx.lineTo(ending x − location, ending y − location)
- ctx.stroke(); this adds the strokestyle of red to the line
- now add to the script
- Circles require you to teach the computer with a function of how to make a circle
- function drawCircle(x − location,y − location,r − value) {
- ctx.beginPath(); this is telling the computer we are doing a path
- ctx.arc(x − location,y − location, radius value,0,2*Math.PI,true);
- ctx.fill(); fills the circle with current color
- ctx.stroke();} this adds the strokestyle of red to the line
- drawCircle(x − location,y − location,r − value);
click ctrl−s to save the file
click ctrl−s to save the file
click ctrl−s to save the file
Your canvas.html file should look like this when opened in google
You will emial me a copy of completed html lesson called canvas.html file
