<html><body style="margin:0;padding:0"> <canvas id="c" /> </body></html> <script> var canv, c; var loadCanvas = function(){ canv = document.getElementById('c'); canv.width = 500; canv.height = 500; c = canv.getContext('2d'); c.fillStyle = "black"; c.fillRect(0,0,500,500); } window.onload = loadCanvas(); window.addEventListener('message', function(event){ console.log('message: ' + event.data.x + ' ' + event.data.y); c.strokeStyle = "orange"; c.beginPath(); c.moveTo(canv.width/2,canv.height/2); c.lineTo(event.data.x, event.data.y); c.closePath(); c.stroke(); c.fillStyle = "rgba(0,0,0,0.1)"; c.fillRect(0,0,canv.width,canv.height); }) </script>