I really enjoyed theNetflix seriesSquid Game. The series was intense 😱, and I’m a big fan now.
So I decided to write a quick HTML canvas program to display a Squid Game card. No worries. No spoilers here!
It’s a short and simple HTML program. Let's walk through the code.
Here are the beginning HTML elements:
<!DOCTYPE html><htmllang="en"><head><title>SG</title></head>Next are the start of the body and the canvas elements:
<body><canvasid="myCanvas"width="336"height="192"></canvas>JavaScript code comes next. Here we get the canvas and context objects:
<script>varcanvas=document.getElementById("myCanvas");varctx=canvas.getContext("2d");The context object lets us set colors, set styles, and draw. This code draws a filled rectangle with the specified fill color on the entire canvas, representing the business card background:
ctx.fillStyle="#E2C4A5";ctx.fillRect(0,0,canvas.width,canvas.height);The context object also lets us set the stroke width and color of the shape outlines:
ctx.lineWidth=5;ctx.strokeStyle="#655451";Next are the circle, triangle, and square:
ctx.beginPath();ctx.arc(105,96,25,0,2*Math.PI);ctx.stroke();ctx.beginPath();ctx.moveTo(143,121);ctx.lineTo(193,121);ctx.lineTo(168,71);ctx.lineTo(143,121);ctx.stroke();ctx.beginPath();ctx.rect(215,71,50,50);ctx.stroke();Finally, we end the program with the closing tags:
</script></body></html>Here's the complete program:
<!DOCTYPE html><htmllang="en"><head><title>SG</title></head><body><canvasid="myCanvas"width="336"height="192"></canvas><script>varcanvas=document.getElementById("myCanvas");varctx=canvas.getContext("2d");ctx.fillStyle="#E2C4A5";ctx.fillRect(0,0,canvas.width,canvas.height);ctx.lineWidth=5;ctx.strokeStyle="#655451";ctx.beginPath();ctx.arc(105,96,25,0,2*Math.PI);ctx.stroke();ctx.beginPath();ctx.moveTo(143,121);ctx.lineTo(193,121);ctx.lineTo(168,71);ctx.lineTo(143,121);ctx.stroke();ctx.beginPath();ctx.rect(215,71,50,50);ctx.stroke();</script></body></html>Save this program to a file namedsg.html and open it in a browser.
Enjoy the program and Squid Game! 😀
Follow me on Twitter@realEdwinTorres for more programming tips and help.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
