Creating a Squid Game Card in HTML

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.

Creating a Squid Game Card in HTML

Using HTML Canvas Graphics to Draw Shapes