I really enjoyed the Netflix series Squid 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>
<html lang="en">
<head>
<title>SG</title>
</head>
Next are the start of the body and the canvas elements:
<body>
<canvas id="myCanvas" width="336" height="192"></canvas>
JavaScript code comes next. Here we get the canvas and context objects:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = 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>
<html lang="en">
<head>
<title>SG</title>
</head>
<body>
<canvas id="myCanvas" width="336" height="192"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = 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 named sg.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)