1

Okay, so I know there is a similar post to this (javascript erase image with cursor) but I've seen it and the code linked in the answers and I was wondering if there was a way to edit the code so that instead of erasing a solid color to reveal an image, I could erase an image to reveal a different image.

This is the code/markup from the site.

HTML

<div id="canvas"></div>

CSS

#canvas {
background:url(http://www.topscratchcards.com/images/games/888ladies/scratchcard-winning-ticket.jpg);
width: 531px;
height: 438px;
}

JAVASCRIPT

(function() {
// Creates a new canvas element and appends it as a child
// to the parent element, and returns the reference to
// the newly created canvas element


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 = 20; // 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, 531, 438, '#ddd');

})();

I don't know if there is a way to edit this code to achieve what I want - if there isn't then is there any alternative method/code I could use?

Community
  • 1
  • 1
spider-web
  • 11
  • 2

2 Answers2

0

There's an alternative.

You can use .innerHTML to resolve your problem.

eg. take a div with name mydiv

< img id="myImage" 
    src="http://www.w3schools.com/js/pic_bulboff.gif" 
    onmouseover="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulbon.gif'"
    onmouseout="document.getElementById('myImage').src='http://www.w3schools.com/js/pic_bulboff.gif'" 
>

Ideally this sould solve your purpose

Ishita Sinha
  • 2,168
  • 4
  • 25
  • 38
Vineet Arora
  • 1
  • Thank you go the answer. But this wouldn't change the image immediately instead of erasing the front image with the cursor (in small amounts) – spider-web Aug 25 '16 at 23:08
0

$("svg").on("mousemove", function (e) {
  var x = e.pageX - $("#mySvg").offset().left;
  var y = e.pageY - $("#mySvg").offset().top;
  // console.log(x);
  // console.log(y);
  $(".a").attr("cx", x).attr("cy", y);
});
#mySvg {
  width: 531px;
  height: 438px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="mySvg">
        <clippath id="clip">
            <circle cx="-20" cy="-20" r="80" class="a" />
        </clippath>

        <image preserveAspectRatio="xMidYMin slice"
            href="https://www.gannett-cdn.com/presto/2021/03/02/USAT/a51266de-f2dc-404c-a46a-bcca17c496eb-matrix-reloaded-keanu-reeves.png?width=660&height=372&fit=crop&format=pjpg&auto=webp"
            class="one" />

        <image preserveAspectRatio="xMidYMin slice" href="https://static.dw.com/image/56167112_303.jpg"
            clip-path="url(#clip)" />
    </svg>
casper
  • 259
  • 4
  • 18