canvas | Tech Tips & Tricks

How To Change Color Of An Image Drawn In An HTML Canvas

February 24, 2016 by blogmeister·0 Comments

User Jarrod from the StackOverflow forum posted a very useful function to change the color of the image drawn in an HTML Canvas.

I modified his function to take into account where the image’s current position is in the Canvas.

function changeColorOfDrawnImage(context, image, color, x, y, w, h, rotate) {
    context.save();
    context.translate(x, y);
    context.clearRect(0, 0, w, h);
    if (rotate)
        context.rotate(rotate);
    context.drawImage(image, 0, 0, w, h);
    context.fillStyle = color;
    context.globalCompositeOperation = "source-in";
    context.fillRect(0, 0, w, h);
    context.restore();
}

function changeColorOfDrawnImage(context, image, color, x, y, w, h, rotate) {

context.save();

context.translate(x, y);

context.clearRect(0, 0, w, h);

if (rotate)

context.rotate(rotate);

context.drawImage(image, 0, 0, w, h);

context.fillStyle = color;

context.globalCompositeOperation = "source-in";

context.fillRect(0, 0, w, h);

context.restore();

}

How To Copy Canvas As Image To Clipboard Using Javascript Programmatically

July 29, 2015 by blogmeister·0 Comments

The answer is … you can’t! Well, generally speaking, that is.

Here are the reasons why:

First things first, for security reasons, you cannot even simulate running the context menu’s Copy Image command.
In Internet Explorer, you can copy a portion or all of the Canvas to an Image using document.body.createControlRange.
In some later versions of Firefox, the ClipboardEvent lets you do copy an Image to clipboard.
In Chrome, there is no way to do so except for some workaround using a littler helper called Flash.
Then again, Flash won’t work in Safari browser.

With these findings, to provide the same consistency across browsers, it is best not to add this feature to your web application for consistency reasons which can bring confusion to some users who are not technically inclined why they will be forced to use certain browsers that only this feature works.

How To Let Mouse Events Pass Through HTML Canvas

July 24, 2015 by blogmeister·0 Comments

This was an interesting scenario that I came across with. PDF.JS by default can let you select text and copy them to the clipboard. However, since my requirement had us do with creating annotations and since it is messy to mess around the DIV layers of the PDF.JS pages, we had to create a separate Canvas element to draw out annotations in.

Now, the problem is that since there is an extra Canvas layer on top of the existing Canvas layer of PDF.JS where they draw their images if the PDF contains pictures, selecting text is not possible.

However, through a CSS attribute it is possible to let mouse clicks pass through the Canvas element using the pointer-event attribute. The values for these are auto for enabled and none for disabled.

If you plan to use Javascript, use canvas.style.pointerEvents = ‘auto|none’

Tech Tips & Tricks

tech tips gadgets programming software

Tag: canvas

How To Change Color Of An Image Drawn In An HTML Canvas

How To Copy Canvas As Image To Clipboard Using Javascript Programmatically

How To Let Mouse Events Pass Through HTML Canvas