JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<canvas id="a" width="9000" height="900">
</canvas>

CSS

canvas {
  border: 2px dotted black;
}

JavaScript

// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

// Draw the face
context.fillStyle = "grey";
context.beginPath();
context.arc(999, 478, 40, 0, 2 * Math.PI);
context.closePath();
context.fill();

//Add a border to the face
context.strokeStyle = 'black'
context.lineWidth = 10;
context.stroke();
context.fillStyle = "black";

// Draw the left ear
context.fillStyle = "red";
context.beginPath();
context.arc(956, 425, 30, 0, 2 * Math.PI);
context.closePath();
context.fill();

//Add a border to the left ear 
context.strokeStyle = 'black'
context.lineWidth = 10;
context.stroke();
context.fillStyle = "black";

// Draw the right ear
context.fillStyle = "red";
context.beginPath();
context.arc(1050, 425, 30, 0, 2 * Math.PI);
context.closePath();
context.fill();

//Add a border to the right ear 
context.strokeStyle = 'black'
context.lineWidth = 10;
context.stroke();
context.fillStyle = "black";

//Add a border to the right ear 
context.strokeStyle = 'black'
context.lineWidth = 10;
context.stroke();
context.fillStyle = "black";

//Flower

var fill_color = "white";
var stroke_color = "black";
var line_width = 10;
var radius = 10;
var start_radian = 0 * Math.PI;
var stop_radian = 2 * Math.PI;
var x_coordinate = 800;
var y_coordinate = 100;
var x_increment = 50;
var y_increment = 25;
var r_increment = 10;

// Incremental adjustment
for (i = 0; i < 10; i++) {
  // Draw the first circle
  context.fillStyle = fill_color;
  context.beginPath();
  context.arc(x_coordinate + x_increment * i, y_coordinate + y_increment * i, radius + r_increment * i, start_radian, stop_radian, true);
  context.closePath();
  context.fill();

  //Add a border to the first circle
  context.strokeStyle = stroke_color;
  context.lineWidth = line_width;
  context.stroke();
}

var x_coordinates = [500, 600, 700, 600, 500, 400, 300, 400];
var y_coordinates = [100, 200, 300, 400, 500, 400, 300, 200];
var colors = ["red", "blue", "green", "yellow", "pink",...