<canvas id="canvas"></canvas>
<script>
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 8, 8);
var webp = canvas.toDataURL("image/webp"); // Chrome only?
var png = canvas.toDataURL("image/png");
var jpg = canvas.toDataURL("image/jpeg");