puffkritty
New Member
For some reason using the same code to find mouse position relative to a specific element (in this case the HTML5 canvas) works on mouse down but breaks on mouse up. Could you help me figure this out?\[code\]<!DOCTYPE html><html><body><h1>This is page one; here we will play with HTML5</h1><a href= "http://stackoverflow.com/questions/index.html">This link takes you back to home</a><div> <canvas onmousedown="mouseDown()" onmouseup="mouseUp()" id="myCanvas" width="1600" height="800" style="border:1px solid #000000;"></canvas> </div><script type="text/javascript">var rect1x = rec1y;var a = b;function mouseDown(){a = document.getElementById("myCanvas").getBoundingClientRect().left;b = document.getElementById("myCanvas").getBoundingClientRect().top;rect1x = window.event.clientX - a;rect1y = window.event.clientY - b;}function mouseUp(){var rect2x = window.event.clientX - a;var rect2y = window.event.clientY - b;var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(rect1x,rect1y,rect2x,rect2y);}</script><center><font size=1>Draw!</font></center></body></html>\[/code\]Thanks!