4. HTML5 Canvas [stroke,fill, clear, gradient]

Hello Canvas!

How to use stroke, fill, clear

[SOURCE VIEW]

<!--JavaScript --> function doFirst1() { var x = document.getElementById('canvas1'); canvas = x.getContext('2d'); canvas.strokeStyle = "red"; //선 Style을 red로 canvas.fillStyle = "blue"; //체우기 Style 을 blue로 canvas.strokeRect(10,10,100,200); //절대경로 x=10,y10 에서 가로130세로50size로 선을 그려라 canvas.fillRect(150,50,100,200); //절대경로 x=150,y50 에서 가로130세로50size로 면을 그려라 canvas.strokeRect(300,10,100,200); //절대경로 x=300,y10 에서 가로130세로50size로 선을 그려라 canvas.fillRect(450,50,100,200); //절대경로 x=450,y50 에서 가로130세로50size로 면을 그려라 canvas.clearRect(350,40,130,50); //절대경로 x=350,y40 에서 가로130세로50 size로 지워라 canvas.clearRect(460,100,30,60); //절대경로 x=460,y100 에서 가로30세로60 size로 지워라 } 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 soory. <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

How to use createLinearGradient, addColorStop

[SOURCE VIEW]

<!--JavaScript --> function doFirst2() { var x = document.getElementById('canvas2'); canvas = x.getContext('2d'); var g = canvas.createLinearGradient(0,0,100,200); g.addColorStop(.0,"blue"); g.addColorStop(1,"red"); canvas.fillStyle = g; canvas.fillRect(0,0,100,200); canvas.strokeStyle = "red"; canvas.strokeRect(10,10,100,200); canvas.fillRect(150,50,100,200); canvas.strokeRect(300,10,100,200); canvas.fillRect(450,50,100,200); canvas.clearRect(350,40,130,50); canvas.clearRect(460,100,30,60); } 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> </section>

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