canvas-eraser

경품이벤트 등 활용

by uiwwnw

HTML

<img src="https://post-phinf.pstatic.net/MjAxNzA5MjdfNDYg/MDAxNTA2NDczMTkxNjcx.xZn1MLLPJXFQxC8BojeU87A7cwV_eQAKCJnesA8yV7sg.tMppcjXzFOHm_9EMIMny9t3fmLjU9MhmZnMjKEVm62og.JPEG/7358_8257_3232.jpg?type=w1200" alt="a">
<canvas id="myCanvas" width="367" height="168" style="background: #fff;"></canvas>

SCSS

body:before {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: "";
    }
img {
  z-index: 1;
  position: relative;
}
canvas {
  z-index: 3;
  position: absolute;
  left: 65px;
  top: 326px;
  background-size: cover;
}

JavaScript

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext('2d');
var swc;
var img = 'background-image: url("/data/images/pages/canvas/sample.jpg");';
var bp = 'background-position: -' + myCanvas.offsetLeft + 'px -' + myCanvas.offsetTop + 'px; ';
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);

myCanvas.onmousedown = function(event) {
  ctx.clearRect(event.x - myCanvas.offsetLeft, event.y - myCanvas.offsetTop, 10, 10);
  swc = true;
}
myCanvas.onmousemove = function(event) {
  if(swc)
  ctx.clearRect(event.x - myCanvas.offsetLeft, event.y - myCanvas.offsetTop, 20, 20);
}
myCanvas.onmouseup = function(event) {
  ctx.clearRect(event.x - myCanvas.offsetLeft, event.y - myCanvas.offsetTop, 10, 10);
  swc = false;
}
myCanvas.setAttribute('style', img + bp);