Replacing color with photo in html drawing tool

Question

In this drawing tool for html I want to replace the color (#ddd) with a photo.

Instead of the current version I want to replace the grey rectangle with a photo. Any idea on how to do that? And it won't let me reposition the rectangle, any idea why?

(function() {
    function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
}

function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
        this.fillStyle = fillColor;
        this.beginPath();
        this.moveTo(x, y);
        this.arc(x, y, radius, 0, Math.PI * 2, false);
        this.fill();
    };
    ctx.clearTo = function(fillColor) {
        ctx.fillStyle = fillColor;
        ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "#ddd");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
        if (!canvas.isDrawing) {
            return;
        }
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var radius = 25; // or whatever
        var fillColor = '#ff0000';
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
        canvas.isDrawing = true;
    };
    canvas.node.onmouseup = function(e) {
        canvas.isDrawing = false;
    };
}

var container = document.getElementById('canvas');
init(container, 400, 400, '#ddd');

})();

Why don't you layer the solid fill on top of the image canvas and erase the top layer? — Mr. Polywhirl, Mar 07 '17 at 19:16
Use https://github.com/szimek/signature_pad , you can easily change color image or whatever you want — Pratyush Pranjal, Mar 07 '17 at 19:27

score 1 · Answer 1 · edited May 23 '17 at 12:25

You can achieve this by layering a solid canvas on top of another canvas. Erasing parts of the top canvas should reveal the canvas below.

The following reuses 99% of the code from two separate posts.

// Borrowed from here: https://stackoverflow.com/a/4776378
var canvasWrapper = document.getElementsByClassName('layer-wrapper')[0];
var imageLayer = canvasWrapper.querySelector('.layer-image');
var drawLayer = canvasWrapper.querySelector('.layer-draw');
var img = new Image;
img.onload = function() {
  imageLayer.width = drawLayer.width = img.width;
  imageLayer.height = drawLayer.height = img.height;

  var imageCtx = imageLayer.getContext('2d');
  imageCtx.drawImage(img, 0, 0);

  var drawCtx = drawLayer.getContext('2d');
  drawCtx.fillStyle = '#7F7F7F';
  drawCtx.fillRect(0, 0, img.width, img.height);
};
img.src = 'https://pbs.twimg.com/profile_images/462372073982025728/jTHaxsxd.jpeg';


// Borrowed from here: https://stackoverflow.com/a/25916334
var RADIUS = 32;
var canvas = canvasWrapper.querySelector('.layer-wrapper .layer-draw');
var ctx = canvas.getContext('2d');
var lastX;
var lastY;
var strokeColor = 'red';
var strokeWidth = 5;
var mouseX;
var mouseY;
var canvasOffset = $(canvas).offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isMouseDown = false;

function handleMouseDown(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  // Put your mousedown stuff here
  lastX = mouseX;
  lastY = mouseY;
  isMouseDown = true;
}

function handleMouseUp(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  // Put your mouseup stuff here
  isMouseDown = false;
}

function handleMouseOut(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  // Put your mouseOut stuff here
  isMouseDown = false;
}

function handleMouseMove(e) {
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  // Put your mousemove stuff here
  if (isMouseDown) {
    ctx.beginPath();
    if (mode == "pen") {
      ctx.globalCompositeOperation = "source-over";
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(mouseX, mouseY);
      ctx.stroke();
    } else {
      ctx.globalCompositeOperation = "destination-out";
      ctx.arc(lastX, lastY, RADIUS, 0, Math.PI * 2, false);
      ctx.fill();
    }
    lastX = mouseX;
    lastY = mouseY;
  }
}

$(canvas).mousedown(function(e) {
  handleMouseDown(e);
}).mousemove(function(e) {
  handleMouseMove(e);
}).mouseup(function(e) {
  handleMouseUp(e);
}).mouseout(function(e) {
  handleMouseOut(e);
});

var mode = 'eraser';
//$('#pen')   .click(function() { mode = 'pen';    });
//$('#eraser').click(function() { mode = 'eraser'; });

.layer-wrapper {
  position: relative;
  width: 400px;
  height: 300px;
}

.layer-wrapper canvas.layer {
  position: absolute;
  top: 0;
  left: 0;
}

.layer-image {
  z-index: 1;
}

.layer-draw {
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer-wrapper">
  <canvas class="layer layer-image"></canvas>
  <canvas class="layer layer-draw"></canvas>
</div>

Replacing color with photo in html drawing tool

1 Answers1