CODEWITHSUNDEEP
javascripthtmlcanvas
user3122094
user3122094

Reputation: 241

Mask image in html canvas

Im trying to change a mask to an image in a html5 canvas when the mouse enters the canvas. When the mouse enters the canvas i draw a shape thats gonna act as a mask. It draws as i want but it wont mask the image.

The function that draws the mask is drawLine(); What is wrong here?

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;

img.onload = function () {
    context.save();
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(160, 600);
    context.rect(0, 0, 160, 600);
    context.closePath();
    context.clip();
    context.drawImage(img, 0, 0);
    context.restore();
};

img.src = "http://placekitten.com/160/600";

canvas.addEventListener('mouseenter', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = mousePos.y + ', ' + mousePos.x; 
    mY = mousePos.y;
    mX = mousePos.x;
   drawLine();
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function drawLine() {

    if(mX > 80) {
        context.restore();
        context.fillStyle = "rgb(000,000,000)";
        context.beginPath();
        context.moveTo(160, mY);
        context.lineTo(0,mY+setCutAngle());
        context.lineTo(0,600);
        context.lineTo(160,600);
        context.fill();
        context.closePath();
    } else {

    }
    context.stroke();
}

function setCutAngle() {
    return Math.floor(Math.random() * 45) + 10;
}

Upvotes: 0

Views: 1644

Answers (1)

PaulBinder
PaulBinder

Reputation: 2052

Is this what you are looking for? JSFIDDLE Updated so image loads at the start. I believe your main problem was caused by not clearing the canvas. Thus your clip would not show

Updated JSFIDDLE to match your code. Remove that logic from your load event. It should only happen on your drawevent. You are also not clearling or clipping your image in the draw event.

    var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;

img.onload = function () {
    context.drawImage(img, 0, 0);
};

img.src = "http://placekitten.com/160/600";

canvas.addEventListener('mouseenter', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = mousePos.y + ', ' + mousePos.x; 
    mY = mousePos.y;
    mX = mousePos.x;
    drawLine();
}, false);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function drawLine() {
     context.save();
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(mX > 80) {
        context.restore();
        context.fillStyle = "rgb(000,000,000)";
        context.beginPath();
        context.moveTo(160, mY);
        context.lineTo(0,mY+setCutAngle());
        context.lineTo(0,600);
        context.lineTo(160,600);
        context.clip();
        context.drawImage(img, 0, 0);
        context.closePath();
    } else {

    }
    context.stroke()
}

function setCutAngle() {
    return Math.floor(Math.random() * 45) + 10;
}

Upvotes: 1

Related Questions