<!DOCTYPE html> <html lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> <title>Clicking the canvas should turn it green (and shift it slighly)</title> <style> canvas { border: 10px solid black; } .opacity { opacity: 0.8; } </style> </head><body><div style="transform: translateX(1px)"> <div class="wrapper" style="transform: translateX(1px);"> <div class="opacity"> <div class="border"> <canvas id="canvas" width="200" height="200"></canvas> </div> </div> </div> </div> <script> var canvas = document.getElementById('canvas'); canvas.width = 200; canvas.height = 200; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'lime'; ctx.fillRect(0, 0, 200, 200); </script> </body></html>