JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width = "400" height = "400"></canvas>

CSS

canvas{
    border:1px solid red;
}

img{
    width:400px;
    height:400px;
}

JavaScript

var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//set text context
context = textContext(context,40,'7');

imageObj.src = "http://files.parsetfss.com/9b0f7c07-ecb0-4cec-bc9e-bb9eb06a06b1/tfss-1e7f74ea-ea1d-47b6-b5b8-def9e0610290-goose";
imageObj.crossOrigin = "anonymous";
imageObj.onload = function(){
   context.drawImage(imageObj,0,0);
   context.strokeText('I like geese', 70, 200);
   context.fillText('I like geese',70,200);
}

function textContext(context,fontsize,lineWidth){
    context.font = fontsize+'pt Sans-Serif';
    context.fillStyle = 'white';
    context.strokeStyle = 'black';
    context.lineJoin = 'round';
    context.lineWidth = lineWidth;
    return context; 
}	

resize();
window.addEventListener('resize', resize, false);

function resize(){
    width = window.innerWidth;
    if(width<=400){
        canvas.style.width = width+'px';
        canvas.style.height = width+'px';
    }
}