topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

graphic-canvas-example-draw-tool.htm / htm


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
  <html><head><title>Scribble</title>
  
  <style type="text/css">
  canvas {
    border: 1px solid black;
  }
  </style>
  <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);
  }
  function transform_event_coord(e) {
    return {x: e.clientX - 10, y: e.clientY - 10};
  }
  var drawing = false;
  var lastpos = {x:-1,y:-1};
  function on_mousedown(e) {
    drawing = true;
    lastpos = transform_event_coord(e);
  }
  function on_mousemove(e) {
    if (!drawing)
      return;
  
    var pos = transform_event_coord(e);
  
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
  
    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;
  }
  function on_mouseup(e) {
    drawing = false;
    draw_thumb();
  }
  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 onload="init()">
  <img id="ie" style="display: none;" src="graphic-canvas-example-draw-ie-logo.jpg">
  <canvas id="canvas" width="400" height="400"></canvas>
  <canvas id="thumb" width="100" height="100"></canvas>
  
  </body></html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

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.