Testpaint

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Paint</title>
    <style type="text/css">
      #content { position: relative; }
      #cvs { border: 1px solid #c00; }
      #cvsTmp { position: absolute; top: 1px; left: 1px; }
    </style>
  </head>
  <body>
    <p>


<label>
Object type:
    <select id="drawTool">
        <option value="line">Linje</option>
        <option value="pencil">Blyant</option>
        <option value="rect">Rektangel</option>
        <option value="circle">Sirkel</option>
        <option value="oval">Oval</option>
        <option value="polygon">Polygon</option>
    </select>

Shape drawn:
    <select id="shapeDrawn">
        <option value=""></option>
    </select>


<button id="deleteLastAction">Slett</button>
</label>

      </p>
      <div id="content">
          <canvas id="cvs" width="1024" height="512"></canvas>
      </div>

      <script type="text/javascript">

if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas;
  var context;
  var canvasTmp;
  var contextTmp;
  var tool;
  var tool_default = 'line';

  function init () {
    // Find the canvas element.
    canvasTmp = document.getElementById('cvs');
    if (!canvasTmp) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvasTmp.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    contextTmp = canvasTmp.getContext('2d');
    if (!contextTmp) {
      alert('Error: failed to getContext!');
      return;
    }

    var content = canvasTmp.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
      alert('Error: I cannot create a new canvas element!');
      return;
    }

    canvas.id     = 'cvsTmp';
    canvas.width  = canvasTmp.width;
    canvas.height = canvasTmp.height;
    content.appendChild(canvas);

    context = canvas.getContext('2d');

    var tool_select = document.getElementById('drawTool');
    if (!tool_select) {
      alert('Error: failed to get the drawTool element!');
      return;
    }
    tool_select.addEventListener('change', ev_tool_change, false);

    if (tools[tool_default]) {
      tool = new tools[tool_default]();
      tool_select.value = tool_default;
    }

    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    }

    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  function ev_tool_change (ev) {
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }

  function img_update () {
        contextTmp.drawImage(canvas, 0, 0);
        context.clearRect(0, 0, canvas.width, canvas.height);
  }

  var tools = {};

  // The drawing pencil.
  tools.pencil = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  // The rectangle tool.
  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      var x = Math.min(ev._x,  tool.x0),
          y = Math.min(ev._y,  tool.y0),
          w = Math.abs(ev._x - tool.x0),
          h = Math.abs(ev._y - tool.y0);

      context.clearRect(0, 0, canvas.width, canvas.height);

      if (!w || !h) {
        return;
      }
      context.fillRect(x, y, w, h);
        context.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  // The line tool.
  tools.line = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);

      context.beginPath();
      context.moveTo(tool.x0, tool.y0);
      context.lineTo(ev._x,   ev._y);
      context.stroke();
      context.closePath();
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  // The circle tool.
  tools.circle = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

context.clearRect(0, 0, canvas.width, canvas.height);

    var x = (mouse.x + start_mouse.x) / 2;
    var y = (mouse.y + start_mouse.y) / 2;

    var radius = Math.max(
        Math.abs(mouse.x - start_mouse.x),
        Math.abs(mouse.y - start_mouse.y)
    ) / 2;

    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI*2, false);
    // context.arc(x, y, 5, 0, Math.PI*2, false);
    context.stroke();
    context.closePath();

};

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };


  init();

}, false); }

      </script>
  </body>
</html>