JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="quiz" width="1026" height="788"></canvas>
JavaScript
$(function() {
//Canvas
var canvasQuiz = $("#quiz")[0].getContext("2d");
var w = $("#quiz").width();
var h = $("#quiz").height();
canvasQuiz.fillRect(0, 0, w, h);
canvasQuiz.strokeRect(0, 0, w, h);
function startBtn() {
//Properties
canvasQuiz.beginPath();
canvasQuiz.rect(400, 600, 200, 100);
canvasQuiz.lineWidth = 7;
canvasQuiz.fill();
canvasQuiz.strokeStyle = 'black';
canvasQuiz.fillStyle = "white";
canvasQuiz.stroke();
//Button Text
canvasQuiz.font = "normal 44px georgia";
canvasQuiz.fillText('Start!', 440, 660);
}
//Background Image
var imgObj = new Image();
imgObj.src = 'http://patrickschreiner.com/wp-content/uploads/2013/05/office-cast-1024x786.jpg';
imgObj.onload = function() {
canvasQuiz.drawImage(imgObj, 1, 1);
//Start Button
startBtn();
};
})();