canvas drawing object test

by Matt Rummler

HTML

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAM3GMrM7oc-vRQPf1gwOk4a5G69KOm95g&callback=createMap">
    </script>
  <body>
    <div align="center" class="center mapcontainer">
          <span class="somespace">
            Draw an area to select where to search. 
            <button id="draw" type="button" class="btn btn-raised btn-danger">
              <i class="fa fa-pencil"></i>
              Draw Area
            </button>
            <button id="clearDrawing" type="button" class="btn btn-default btn-raised">
              Clear
            </button>
          </span>
      <canvas id="gameMap">
      </canvas>
      <!-- -->
      <div id="gmap">
      </div>
<!--    </section> -->
    </div>
      <button id="mapbutton">Show Map</button>
      <button id="clearDrawing">Clear Area</button>
      Line width : <select id="selectWidth">
          <option value="1" >1</option>
          <option value="2" selected="selected">2</option>
          <option value="4">4</option>
          <option value="6">6</option>
          <option value="8" >8</option>
      </select>
      Color : <select id="selectColor">
          <option value="black">black</option>
          <option value="blue" selected="selected">blue</option>
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="yellow">yellow</option>
          <option value="gray">gray</option>
      </select> 
    
    <script src="drawingFunctions.js"></script>
    
  </body>

CSS

html
{
  width: 100%;
  height: 100%;
}
.mapcontainer
{
  width: 85% !important;
  height: 85% !important;  
}
canvas, #gmap
{}
canvas
{
  all: inherit;
  image-rendering: pixelated;
  border:2px solid black;
  z-index: 110;
  position: absolute;
}
#gmap
{
  all: inherit;
/*  height: 85% !important;
  width: 85%;*/
  position: absolute;
}

JavaScript

/**
 * DrawingObj will hopefully contain everything the map code will need to initialize and use the canvas drawing capabilities
 * If this approach doesn't work will need to look more into events
 */
window.onload = function() {
  var DrawingObj = {
    mousePressed: false
    ,canvas: document.getElementById('gameMap')
    ,ctx: canvas.getContext("2d")
    ,startCoordinatesObj: {}
    ,shapeDefArray: []
    ,allShapesArray: []
    ,onInit: function() {
      var initAll = function() {
  //do all the stuff that needs to be run when this object is created
  //
        ////////setup
        //
        this.resizeCanvasToDisplaySize(canvas);
        ctx.translate(0.5,0.5); 
        console.log(ctx);

        //////event initialization
        //
        canvas.onmousedown = function(e) {
            mousePressed = true;
            ctx.beginPath();
            ctx.strokeStyle = document.getElementById('selectColor').value;//$('#selColor').val();
            ctx.lineWidth = document.getElementById('selectWidth').value;//$('#selWidth').val();
            ctx.lineJoin = "miter";
            ctx.miterLimit = 1;

            //for capturing the area of the drawn object
            startCoordinatesObj = getMousePos(canvas,e);
        };

        canvas.onmousemove = function(e) {
            if (mousePressed) {
              shapeDefArray.push(getMousePos(canvas,e));
              let localCoordinateObj = shapeDefArray[shapeDefArray.length -1];
              ctx.lineTo(localCoordinateObj.x, localCoordinateObj.y);
              ctx.stroke();
            }
        };

        canvas.onmouseup = function(e) {
          mousePressed = false;
          // drawing the line to finish the circle like Zillow does
          console.log('startCoordinatesObj in canvas.onmouseup: '+startCoordinatesObj);
          if(startCoordinatesObj)
          {
            ctx.lineTo(startCoordinatesObj.x, startCoordinatesObj.y);
            ctx.stroke();
            startCoordinatesObj = {};
   ...