Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script type="text/javascript">
- window.onload = function() {
- var oCanvas = document.getElementById("thecanvas");
- var oCtx = oCanvas.getContext("2d");
- var iWidth = oCanvas.width;
- var iHeight = oCanvas.height;
- oCtx.fillStyle = "transparent";
- oCtx.fillRect(0,0,iWidth,iHeight);
- oCtx.beginPath();
- oCtx.strokeStyle = "rgb(255,0,0)";
- oCanvas.onmousedown = function(e) {
- bMouseIsDown = true;
- iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
- iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
- }
- oCanvas.onmouseup = function() {
- bMouseIsDown = false;
- iLastX = -1;
- iLastY = -1;
- }
- oCanvas.onmousemove = function(e) {
- if (bMouseIsDown) {
- var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
- var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
- oCtx.moveTo(iLastX, iLastY);
- oCtx.lineTo(iX, iY);
- oCtx.stroke();
- iLastX = iX;
- iLastY = iY;
- }
- }
- }
- document.write("<canvas width=\"356\" height=\"700\" style=\"border: 1px solid black; background-image:url('http:\/\/i.imgur.com\/fI3qz.jpg'); position:fixed; top:10px; left: 10px;\" id=\"thecanvas\"><\/canvas>");
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement