5. HTML5 Canvas [line, text, shadow]

Hello Canvas!

How to use line, text, shadow

About line

moveTo(x,y)

lineTo(x,y)

strokeStyle

stroke

beginPath

move to starting point with coordinate x and y.

Draw a line to this point from starting point. Again x and y being the coordinate.

CSS color of the line

A method to actually make javascript draw a line

Before you start drawing a new line with different color, you will have to call "beginPath".

About text

fillText(text,x,y)

strokeText(text,x,y)

strokeStyle

fillStyle

font

textBaseline

Print the text with solid color within. Text color is determined by fillStyle().

Print the text with only color the outline of the text. Text color is set by strokeStyle().

CSS color for text that call strokeText

CSS color for text that call fillText

CSS font style such as "bold, 10px, san-serif"

This is a little bit tricky to explain. We will need another demo. The value for this propery can be "top", "hanging","middle", "alphabetic", " eographic" and "bottom". Default value is "alphabetic".

[SOURCE VIEW]

<!-- JavaScript--> function doFirst1() { var x = document.getElementById('canvas1'); canvas = x.getContext('2d'); canvas.strokeStyle = "red"; canvas.beginPath(); canvas.moveTo(50,50); canvas.lineTo(70,250); canvas.lineTo(300,200); canvas.closePath(); canvas.stroke(); canvas.beginPath(); canvas.moveTo(200,50); canvas.lineTo(70,250); canvas.lineTo(300,200); canvas.closePath(); canvas.stroke(); canvas.beginPath(); canvas.moveTo(350,50); canvas.lineTo(70,250); canvas.lineTo(300,200); canvas.closePath(); canvas.stroke(); canvas.beginPath(); canvas.moveTo(450,100); canvas.lineTo(70,250); canvas.lineTo(300,200); canvas.closePath(); canvas.stroke(); canvas.shdowOffsetX = 4; canvas.shdowOffsetY = 4; canvas.shdowBlur = 6; canvas.shdowColor = 'rgba(0,0,255,5)'; canvas.font = "bold 30px Tahoma"; canvas.textAlign = "end"; canvas.fillText("Boolean's HTML5 canvas Study!!!",550,350); } window.addEventListener("load",doFirst1,false); <!-- HTML5--> <section id ="main"> <canvas id = "canvas1" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> </section>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas

[SOURCE VIEW]

<!-- JavaScript--> function doFirst2() { var x = document.getElementById('canvas2'); canvas = x.getContext('2d'); canvas.shdowOffsetX = 4; canvas.shdowOffsetY = 4; canvas.shdowBlur = 6; canvas.shdowColor = 'rgba(0,0,255,5)'; canvas.font = "bold 30px Tahoma"; canvas.textAlign = "end"; canvas.fillText("Boolean's HTML5 canvas Study!!!",550,350); canvas.textBaseline = "top"; canvas.fillText('Top',110,200); canvas.textBaseline = "bottom"; canvas.fillText('Bottom',190,200); canvas.textBaseline = "middle"; canvas.fillText('Middle',300,200); canvas.textBaseline = "alphabetic"; canvas.fillText('Alphabetic',400,200); canvas.textBaseline = "hanging"; canvas.fillText('Hanging',500,200); } window.addEventListener("load",doFirst2,false); <!-- HTML5--> <section id ="main"> <canvas id = "canvas2" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas

About shadow

shadowOffsetX

shadowOffsetY

shadowBlur

shadowColor

Horizontal distance (x-axis) between the shadow and the shape in pixel.

Vertical distance (y-axis) between the shadow and the shape in pixel.

How blur you want your shadow to be.

Obviously, this is to set the color of your shadow