JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

A Person:
<br />
<canvas id="canvasPerson" width="500" height="500"></canvas>

CSS

#canvasPerson {
    border:solid 1px silver
}

JavaScript

var canvas = document.getElementById("canvasPerson");
var ctx = canvas.getContext("2d");
//ctx.fillStyle = "#FF0000";
//ctx.fillRect(0, 0, 150, 75);

function drawFace(x, y) {

    ctx.beginPath();
    ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
    ctx.fillStyle = '#feb';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#003300';
    ctx.stroke();

    function drawEye(x) {
        ctx.beginPath();
        ctx.arc(x, 100, 6, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#4bf';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#003300';
        ctx.stroke();
    }

    var eyeDistance = 30;

    drawEye(x - eyeDistance / 2);
    drawEye(x + eyeDistance / 2);

    ctx.beginPath();
    ctx.arc(250, 100, 30, 0.2 * Math.PI, 0.8 * Math.PI, false);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#c00';
    ctx.stroke();

}

function draw() {
    drawFace(250, 100);
    
    var bodyWidth = 100;
    var bodyHeight = 150;

    ctx.beginPath();
    //ctx.fillRect(0, 0, 150, 75);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 5;
    ctx.fillStyle = '#0d7';
    ctx.fillRect(250 - bodyWidth / 2, 150, bodyWidth, bodyHeight);
    ctx.strokeRect(250 - bodyWidth / 2, 150, bodyWidth, bodyHeight);

    ctx.moveTo(250 - bodyWidth / 2, 150);
    ctx.lineTo(60, 180);
    ctx.stroke();

    ctx.moveTo(250 + bodyWidth / 2, 150);
    ctx.lineTo(500 - 80, 180);
    ctx.stroke();


    ctx.moveTo(250 - bodyWidth / 2, 150 + bodyHeight);
    ctx.lineTo(180, 150 + bodyHeight + 160);
    ctx.stroke();

    ctx.moveTo(250 + bodyWidth / 2, 150 + bodyHeight);
    ctx.lineTo(500 - 180, 150 + bodyHeight + 160);
    ctx.stroke();
}


draw();