JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<canvas id="c" width="256" height="256"></canvas>

JavaScript

var canvas = document.getElementById("c"),
    context = canvas.getContext("2d"),
    img = new Image();

img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAYAAAAjt+tHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAADeklEQVRYR8WVXU8TURCG/SX+CBU/A9EIRDGIFsQPKorWAlZaQBBBIlgQCsXSigKFUhRQKFIJREVNVAQjmqgxYrxQEi/UGC8wRo1RDHk9s7Ji26GnVMBJnuzudOadd09P9iwC8F9hkwsJm1xIAhKGqMWYT/zn+TxQgW1fNJzGBLQV7JxTSJO0/U0EGGjK1qC9SDsvkLbUwIXiPfOK1EDn8bSQcOg3oESzBLW6GOXaVpjC1vkjNdBVqpuR9qJUZZjKkNct2oBTB36bIZwmDdurIjXQXZY+I67DyXAVpIhSPu51N6AucxM8Zj3bT0gN9FQYWNQ3vFiZjUc3L6N673pYUtfi5K41sO6LgU0fp6zIiaSIP7WcjtSA12JkceXtECWhh1usFKcjNdBrzWFR3qi2CJdOFcJjzVfuvfZi9DeUK/dEd02BcqVVonpOR2qgz5bPQoKdllzFgEp72SGUJi5FV1VeQN6u38jqSA20ZG9hse9fL0oCoy5LM3U3HXe6GlGnj2V1wjZAK+A4mCDKfIM237evn6eegPH3b1C+YzVsaetYnbANNBo2KSYeXvOI0unorSvBz4mJqSegr94M87YINBs3szphGyCsqVE4bdiCiR/fRXlgfPzwDubk5XDootl+4p8MqKvwdPCKKA+MAXeN+A4sg8uUwPYTUgPuXE1QqndHoj5nuyj3jS+fxlGpjVI2K9enIjVwLj85KE3iXKdVeP38kWiZDtobpeLtW3IT2T4VqQHuHFdpFuJO01axy1cqm29ychIvHtzG/f4O2DPjYd2zlu37G6kB7ghVqTfEo600XZCBs6ZtcBXuRdn2lWg6osUZYyLsB2Jh0UayvSpSA9wJpnK+UIuRXjfGngzj1eNhjD0dwejwdeXze7e7CW9fjqK1YBfbqyI1wB0gKs6cJNh0sWKzRYo3XyH+ilV4NjSgmBjytqDXcQxV4oTkelWkBvy/3cFwZMTBkR6nGKpJi0aDKREdJTq2VkVqwFORhatniucF0pYaaDmaip7qXNxwmucU0iTtoAYIKuBoLd6PW61VIUG1nAbhP8/nIRjUfL5Ej8H22qBQDTdoJtjkTJBwR5kB9zz1LPTbbIYTbDIYNODiSSNGvM0+UG62wwk2KYMGdVpy8LCvVYHuwxlOsMlQoIGe6jyFcIcTbDJUaPC/DCfY5ELCJhcOLPoFBN+hapfCkyQAAAAASUVORK5CYII=";

context.fillStyle = "#ee2222";
context.fillRect(0, 0, 256, 256);
context.drawImage(img, 10, 10);