JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="changeBack()">
<canvas id="test" width="330" height="200" style="border:1px solid #787878;" onmouseover="change()" onmouseout="changeBack()"></canvas>

JavaScript

function changeBack() {
    var c = document.getElementById("test");
    var ctx = c.getContext("2d");
     ctx.clearRect ( 0 , 0 , c.width, c.height );
    ctx.fillStyle = "blue";
    ctx.font = "bold 16px Arial";
    ctx.fillText("hello", 100, 100);
}


function change() {

    var c = document.getElementById("test");
    var ctx = c.getContext("2d");
    ctx.clearRect ( 0 , 0 , c.width, c.height );
    ctx.fillStyle = "red";
    ctx.font = "bold 16px Arial";
    ctx.fillText("world", 100, 100);

}