topical media & game development

talk show tell print

sample-collect-draw-sample-js-draw.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html><head><title>Scribble</title>
  
  

style(s)


  
  <style type="text/css">
  #thumb {
  position:absolute;
  top:380px;
  left:680px;
  }
  canvas {
    border: 1px solid black;
  }
  </style>
  
  

script(s)


  
  <script language="javascript">
  function draw_thumb() {
    var canvas = document.getElementById("canvas");
    var thumb = document.getElementById("thumb");
  
    var ctx = thumb.getContext("2d");
    ctx.drawImage(canvas, 0, 0, 100, 100);
  }
  
  

transform(s)


  
  function transform_event_coord(e) {
    return {x: e.clientX - 10, y: e.clientY - 10};
  }
  
  

mouse down(s)


  
  var drawing = false;
  var lastpos = {x:-1,y:-1};
  
  function on_mousedown(e) {
    drawing = true;
    lastpos = transform_event_coord(e);
  }
  
  

mouse move(s)


  
  function on_mousemove(e) {
    if (!drawing)
      return;
  
    var pos = transform_event_coord(e);
  
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
  

mouse move(s) [continued]


  
    ctx.strokeStyle = "rgba(200,0,0,0.6)";
    ctx.lineWidth = 4.0;
    //ctx.lineJoin = "round";
    ctx.beginPath();
    ctx.moveTo(lastpos.x, lastpos.y);
    ctx.lineTo(pos.x, pos.y);
    ctx.closePath();
    ctx.stroke();
      
    lastpos = pos;
  }
  

mouse up(s)


  
  function on_mouseup(e) {
    drawing = false;
    draw_thumb();
  }
  
  

init(s)


  function init() {
    var ie = document.getElementById("ie");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // ctx.drawImage(ie, 120, 120);
  
    addEventListener("mousedown", on_mousedown, false);
    addEventListener("mousemove", on_mousemove, false);
    addEventListener("mouseup", on_mouseup, false);
    draw_thumb();
  }
  </script></head>
  
  

body


  <body onload="init()">
  
  <img id="ie" style="display: none;" src="sample-collect-draw-ie-logo.jpg">
  <canvas id="canvas" width="780" height="480"></canvas>
  <canvas id="thumb" width="100" height="100"></canvas>
  
  </body></html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.