JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width=200 height=200 id="egypt_id" 
style="border:1px solid black;"></canvas>

JavaScript

//setup
var canvas = document.getElementById("egypt_id");
var context = canvas.getContext('2d');
context.fillStyle = "#000000";
var mubarak_x = 700;
var mubarak_y = 50;
var morsi_x = 25;
var morsi_y = 150;
var qm_x = 500;
var qm_y = 200;

//make new image objects
var egypt_img = new Image();
var mubarak_img = new Image();
var morsi_img = new Image();
var qm_img = new Image();

//these functions draw images on the canvas, at the given position
function draw_egypt()
{
   context.drawImage(egypt_img,0, 0);
}

function draw_mubarak()
{
   //image
   context.drawImage(mubarak_img, mubarak_x, mubarak_y);

   //label
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('Mubarak', mubarak_x, mubarak_y);
}

function draw_morsi()
{
   //image
   context.drawImage(morsi_img, morsi_x, morsi_y);

  //label 
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('Morsi', morsi_x, morsi_y);
}

function draw_qm()
{
   //image
   context.drawImage(qm_img, qm_x, qm_y);

   //label
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('?', qm_x, qm_y);
}

 //load images
 //draw this image as soon as it loads
   egypt_img.onload = draw_egypt();
   egypt_img.src = 'media/egypt.png';


function line_mubarak_morsi()
{
  //draw line between mubarak and morsi
   context.lineWidth = 5;
   context.strokeStyle = 'lightblue';

   //pick-up pen
   context.beginPath();

   //start
   context.moveTo(mubarak_x, mubarak_y);

   //end
   context.lineTo(morsi_x, morsi_y);

  //draw it
  context.stroke();
 }


function line_morsi_qm()
{
  //draw line between morsi and qm

   context.lineWidth = 5;
   context.strokeStyle = 'lightblue';

  //pick-up pen
  context.beginPath();

  //start
  context.moveTo(morsi_x, morsi_y);

  //end
  context.lineTo(qm_x, qm_y);

  //draw it
   context.stroke();
}

function redraw()
{
  //redraws everything, spread over three seconds...
  //immediately draw...