Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Paint</title>
</head>
<body>
<label for="selectShapeType">Object type:</label>
<select onchange="dropDown()" id="selectShapeType"></select> <!--onchange-->
<label for="selectShape">Shape drawn:</label>
<select id="selectShape"></select>
<button id="cmbDelete">Slett</button>
<hr>
<canvas id="cvs" style="background-color: antiquewhite"></canvas>
<script>
  //-------------------------------------------------------------------------------------
  //------ Global Variables -------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  // DOM model of canvas
  var cvs = null;
  // 2D konrext of canvas
  var ctx = null;
  // DOM model of selected shape
  var selectShapeType = null;
  // DOM model of shapes drawn
  var selectShape = null;
  // DOM model of comando button delete
  var cmbDelete = null;


   var radius = 5;

   var dragging = false;
   var dragStartLocation;
   var snapshot;


   var selectedShape;


 //-------------------------------------------------------------------------------------
  //------ Classes and Objects-----------------------------------------------------------
  //-------------------------------------------------------------------------------------


  var EShapeType = {
    Line:       {text: "Linje",     ClosePath: false, Fill: false},
    Pencil:     {text: "Blyant",    ClosePath: false, Fill: false},
    Rectangle:  {text: "Rektangle", ClosePath: true,  Fill: true},
    Circle:     {text: "Sirkel",    ClosePath: true,  Fill: true},
    Oval:       {text: "Oval",      ClosePath: true,  Fill: true},
    Polygon:    {text: "Polygon",   ClosePath: true,  Fill: true}
  };


  //Different colors to shapes

 var colors = ["#e6194b", "#3cb44b", "#ffe119", "#0082c8",
     "#f58231", "#911eb4", "#46f0f0", "#f032e6",
    "#d2f53c", "#fabebe", "#008080", "#e6beff",
    "#aa6e28", "#fffac8", "#800000", "#aaffc3"];


  //-------------------------------------------------------------------------------------
  //------ Functions --------------------------------------------------------------------
  //-------------------------------------------------------------------------------------


  // Updates Canvas on interval timeout
  function drawCanvas() {
    ctx.clearRect(0, 0, cvs.width, cvs.height);


  }

  // Fills all shape types user can draw
  function fillSelectShapeTypes() {
    var keys = Object.keys(EShapeType);
    for (var key in keys) {
      var shapeType = keys[key]; // This is actual the shape type!
      var newOption = new Option(EShapeType[shapeType].text, shapeType, false, false); // New option for shape typw
      selectShapeType.options.add(newOption);// Add the new option to select

        console.log(shapeType);
    }

  }

  // Get excact possition for mouse coordinates in canvas
  function getMousePos(aEvent) {
    var rect = cvs.getBoundingClientRect();
    return {
      x: aEvent.clientX - rect.left,
      y: aEvent.clientY - rect.top
    };
  }

  //Dropdown list

   function dropDown() {
       selectedShape = document.getElementById("selectShapeType").value;
       console.log(selectedShape);

   }


  //Drawing shapes and gives random colors
  function shapes(aEvent){

     ctx.fillStyle = colors[Math.floor(Math.random()*16)];  //random colors
     ctx.strokeStyle = "Black"; //black stroke

      if(selectedShape === "Rectangle") {
          drawRect(aEvent);
      } else if (selectedShape === "Line"){
          drawLine(aEvent);
      } else if (selectedShape === "Circle"){
          drawCirc(aEvent);
      } else if (selectedShape === "Oval"){
          drawOval(aEvent);
      } else if (selectedShape === "Pencil"){
          drawPencil(aEvent);
      }


  }
  console.log(selectShapeType);


  //Pencil
  function drawPencil(aEvent) {


      ctx.lineWidth = radius * 2;
      ctx.lineTo(aEvent.offsetX, aEvent.offsetY);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(aEvent.offsetX, aEvent.offsetY, radius, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.moveTo(aEvent.offsetX, aEvent.offsetY);


  }


  //rectangle shape

   function drawRect(position){


         //ctx.strokeRect(aEvent.x, aEvent.y, 150, 100);
         //ctx.fillRect(aEvent.x, aEvent.y, 150, 100);

        ctx.beginPath();
        ctx.strokeRect(dragStartLocation.x, dragStartLocation.y, -(dragStartLocation.x - position.x), -(dragStartLocation.y - position.y));
        ctx.fillRect(dragStartLocation.x, dragStartLocation.y, -(dragStartLocation.x - position.x), -(dragStartLocation.y - position.y));


     }


  //Line shape

  function drawLine(position){
      ctx.beginPath();
      ctx.moveTo(dragStartLocation.x, dragStartLocation.y);
      ctx.lineTo(position.x, position.y);
      ctx.stroke();
  }


  //circle shape

  function drawCirc(position){
      var radiusRound = Math.sqrt(Math.pow(dragStartLocation.x - position.x), 2)
          + Math.pow ((dragStartLocation.y - position.y), 2);
      ctx.beginPath();
      ctx.arc(position.x, position.y, radiusRound, 0, 2*Math.PI, true);
      ctx.fill();
      ctx.stroke();
  }

  //Oval shape

  function drawOval() {

      ctx.beginPath();
      ctx.scale(1, 0.50);
      ctx.beginPath();
      ctx.arc(200, 200, 180, 0, 2 * Math.PI, false);
      ctx.stroke();

  }


  function takeScreenshots(){
      snapshot = ctx.getImageData(0, 0, cvs.width, cvs.height);

  }

  function renewScreenshots(){
      ctx.putImageData(snapshot, 0, 0);
  }


  //-------------------------------------------------------------------------------------
  //------ Events -----------------------------------------------------------------------
  //-------------------------------------------------------------------------------------

    var mouseIsDown = false;


  // Event for mouse down
  function mouseDown(aEvent) {
    var pos = getMousePos(aEvent);


    dragging = true;
    dragStartLocation = pos;
    takeScreenshots();

    shapes(aEvent);


  }

  // Event for mouse move
  function mouseMove(aEvent) {
    var pos = getMousePos(aEvent);

    var position;

   if(dragging === true && selectedShape === "Rectangle"){
       renewScreenshots();
       position = pos;
       drawRect(position);
   }

   if(dragging === true && selectedShape === "Circle") {
       renewScreenshots();
       position = pos;
       drawCirc(position);
   }

   if(dragging === true && selectedShape === "Line"){
       renewScreenshots();
       position = pos;
       drawLine(position);
   }

   if(dragging === true && selectedShape === "Oval"){
       renewScreenshots();
       drawOval();
   }

   if(selectedShape === "Pencil") {
     drawPencil(aEvent);
   }


   }

  // Event for mouse up
  function mouseUp(aEvent) {
    var pos = getMousePos(aEvent);


    dragging = false;


  }

  function selectShapeChange(){
    drawCanvas();
  }

  function cmbDeleteClick(){
      drawCanvas();
  }

  //-------------------------------------------------------------------------------------

  //-------------------------------------------------------------------------------------
  //------ Main code --------------------------------------------------------------------
  //-------------------------------------------------------------------------------------


  //This function runs after all HTML elements are crated and starts the game
  window.onload = function () {
    cvs = document.getElementById("cvs");
    cvs.width = 1024;
    cvs.height = 512;
    cvs.addEventListener("mousedown", mouseDown, false);
    cvs.addEventListener("mousemove", mouseMove, false);
    cvs.addEventListener("mouseup", mouseUp, false);
    ctx = cvs.getContext('2d');

    selectShapeType = document.getElementById("selectShapeType");
    selectShape = document.getElementById("selectShape");
    selectShape.addEventListener("change", selectShapeChange, false);

    cmbDelete = document.getElementById("cmbDelete");
    cmbDelete.addEventListener("click",cmbDeleteClick, false);
    fillSelectShapeTypes();
    drawCanvas();

    console.log(selectShapeType);
  };

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