Questions tagged [globalcompositeoperation]
54 questions
6
votes
1 answer
Masking multiple shapes using globalCompositeOperation in canvas
I am attempting to draw multiple rectangles and then mask those using globalCompositeOperation 'source-in' which works great, but the issue is that when i fill my rectangles they disappear... If I only have one fill() call they all draw properly but…
Drew Dahlman
- 4,952
- 1
- 22
- 34
4
votes
1 answer
how to make a hole through only overlay Rectangle using fabric js?
I am working on image cropper using fabric js version 1.7.22.
As usually, every cropper display black transparent overlay over the image (where image look like dull), and also display one Rect. (crop Area where image look full with color).
we can…
Mayur Kukadiya
- 2,461
- 1
- 25
- 58
4
votes
1 answer
Using image mask with globalCompositeOperation on KonvaJS?
I am using Konva.js framework and trying to apply an image mask over an other one.
The code is fully copied from this post.
In this jsfiddle example there is small modifications to add a background (Rect).
The problem is that the background is not…
user8716023
- 41
- 2
3
votes
1 answer
Custom globalCompositeOperation in html5 Canvas
I'm looking at all of the different types of global composite operations here:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
None of them do exactly what I want to do. Is there a way to define a…
vaporizationator
- 163
- 2
- 8
3
votes
1 answer
Canvas globalCompositeOperation issue on Samsung galaxy s3 4.1.1 & 4.1.2
I'm trying to create a small drawing application for android browsers. However I've got issues when trying to erase a bitmap using globalCompositeOperation = "destination-out", it simply does not work on the Samsung Galaxy S3
The exact same code…
Andreas
- 51
- 2
3
votes
2 answers
After using the globalCompositeOperation "destination-out", how can I get the outline to enclose the new shape?
I have an arc with a blue outline and then a circle covering part of the arc using the global composite operator "destination-out", resulting in part of the arc being canceled out / cut off, but that leaves part of the new shape without an outline,…
01AutoMonkey
- 2,515
- 4
- 29
- 47
2
votes
0 answers
How do I paint different images using globalCompositeOperation
I've recently trying to make a world map game using tiles, so, I want the images to have different colors, for example, a tile to be as the color of the country. So, the globalCompositeOperation applies the same color to all the images, what did I…
MisterJuanXDLOL
- 85
- 5
2
votes
2 answers
JS: How to get list of supported HTML canvas globalCompositeOperation types
I want to make a HTML select list, with which I can choose which type of globalCompositeOperation will be applied when blending two canvas elements, like this:
2
votes
2 answers
Test if browser supports "multiply" for globalCompositeOperation canvas property
I need to use the multiply blending mode when drawing on a HTML canvas:
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(...);
I get the expected result in latest Chrome/Firefox but not in IE 11: it doesn't crash but I get the same result…
sdabet
- 18,360
- 11
- 89
- 158
2
votes
1 answer
Canvas globalCompositeOperation is not working correctly
I've put this demo from MDN, https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html into a jsFiddle and made the colours 50% transparent.
http://jsfiddle.net/eGAvb/
Now, according to Apple, source-in is supposed to "Display…
Lars
- 7,908
- 11
- 52
- 70
2
votes
2 answers
globalCompositeOperation at jCanvas
How can I integrate globalCompositeOperation(or any other plugin which will give me 'multiply' color manipulation) into jCanvas jQuery plugin?
// How do I get this working? //
var ctx =…
grmmph
- 781
- 2
- 8
- 17
1
vote
1 answer
Using HTML5's globalCompositeOperation "xor" with shape and text elements in Chrome
I have run into an issue when attempting to globalCompositeOperation to mask/blend shapes and text (shapes mask/blended with other shapes works just fine) in Chrome (more specifically I am using Chrome 12.0.7). Can anyone suggest where I might have…
Ninx
- 131
- 2
- 5
1
vote
0 answers
Is it possible to apply clip() or globalCompositeOperation() between two shapes, and then stop clipping / compositing?
I want to render a red square, then apply a globalCompositeOperation = 'source-in' between a blue square and a lime square, and then resume 'normal' rendering, i.e. without the clipping / compositing applied. How can I achieve this? The only way…
flopie3000
- 25
- 4
1
vote
1 answer
Canvas globalCompositeOperation source-in and destination-in not working with multiple source and destination
HTML5 Canvas globalCompositeOperation values source-in and destination-in are not working with multiple source and destination images. The operation results in blank canvas. All other values of globalCompositeOperation works..
user2421690
- 13
- 5
1
vote
1 answer
How correctly apply globalCompositeOperation on canvas's elements?
I have an issue with globalCompositeOperation.
My goal is to make Blue element displayed only inside of Red element and should not be visible outside of Red rectangle at all (kind of Overflow-Hidden effect). Plus, both Red and Blue must have…
Eugene Vilder
- 492
- 1
- 9
- 26