Is there any quick way to colorize greyscale icon (png image with transparent background) when drawing it on canvas? By colorize I mean turning greyscale icon into lets say greenscale (shades of given color instead of grey to match given color theme)
I know I could manipulate each pixel manually but maybe there's some more automated way?
Use compositing to re-tint a grayscale image into "greenscale".
Using compositing is faster than pixel manipulation and as a bonus you won't run afoul of cross-domain security restrictions (which you do if you instead used getImageData).
Create a fully green version of your image.
Draw your grayscale image on the canvas.
Set globalCompositeOperation='color' which causes existing grayscale pixels to be re-tinted ("re-hued") with pixels drawn on top.
Draw your fully green image on the canvas.
"Color" Compositing will turn the grayscale into greenscale.
+ =
Note: requires a modern browser with blending capabilities (Edge not IE)
Example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png";
function start(){
// create a fully green version of img
var c=document.createElement('canvas');
var cctx=c.getContext('2d');
c.width=img.width;
c.height=img.height;
cctx.drawImage(img,0,0);
cctx.globalCompositeOperation='source-atop';
cctx.fillStyle='green';
cctx.fillRect(0,0,img.width,img.height);
cctx.globalCompositeOperation='source-over';
// draw the grayscale image onto the canvas
ctx.drawImage(img,0,0);
// set compositing to color (changes hue with new overwriting colors)
ctx.globalCompositeOperation='color';
// draw the fully green img on top of the grayscale image
// ---- the img is now greenscale ----
ctx.drawImage(c,0,0);
// Always clean up -- change compositing back to default
ctx.globalCompositeOperation='source-over';
}
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=256 height=256></canvas>
You can achieve it using css classes. Check the below example P.S: Source: w3Schools
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(250%);
filter: brightness(250%);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
<body>
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
<img src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="blur" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="brightness" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="contrast" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="invert" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="opacity" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="saturate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="sepia" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
<img class="shadow" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
</body>
Refer this link for learning what filter style can do.
ClickMe
Hey try this alternative!
First create a canvas element and use canvas context to draw image. You can use the canvas filters to apply effects. then use toDataURL method to get the png of the image. All the detailed procedure is explained in the below websites.
http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/
Finally use .toDataURL() method to export/save it.
Hope it works for you!
Related
I have a game and I need to add animations. I have GIFs that I want to draw on the canvas. How do you draw a GIF on a canvas? Is there a way to do this without getting each frame of the GIF? I have tried to just draw it as an image, but it only draws the first frame of the image.
Use invisible image as the source:
const image = document.getElementById('my-image');
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 10, 10);
canvas {
border: 1px solid gray;
}
img {
visibility: hidden;
}
<canvas id="my-canvas" width="240" height="240" ></canvas>
<img width="32" height="32" id="my-image" src="data:image/png;base64,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"/>
When I draw a new path in fabric.js isDrawingMode: true (right side of the screenshot) I want it to appear beneath my overlay image, that is a transparent png.
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true,
preserveObjectStacking: true
});
var img = fabric.Image.fromURL(imgUrl, function(oImg) {
oImg.scaleToWidth(canvas.getWidth());
oImg.id="OverlayImage";
canvas.setOverlayImage(oImg, canvas.renderAll.bind(canvas));
});
It works as soon as I finish the path, though.
I experimented with multiply filter, and stacking order on mouse move event, but got nowhere.
Any idea how to solve this!
https://codepen.io/localhorst/pen/zYvKWqo
a 100% fabric solution would imply not to use the fabric brush/freeDrawingMod.
you could create your draw path and add it to the canvas as a fabric object by tracking mousedown and mousemove, updating your fabric path object each mousmove.
There is a nice explanation for creating a path object at the end of the page : http://fabricjs.com/fabric-intro-part-1
Simpler solution would be to set the image as a html element positioned on top of the canvas. with pointer-events disabled on the image you could click through and draw on the fabric canvas.
from your codepen:
<div class="row">
<img class="overlay" src="https://sandmoshi.github.io/eColorBook/pages/fox-trans.png"/>
<div class="col-8">
<canvas id="c" height="600" width="800" style="border:1px solid #aaa;"></canvas>
</div>
...
.overlay{
position:absolute;
top: 0;
left: 0;
z-index: 1000;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none;
pointer-events: none;
}
i have forked your pen to demonstrate : https://codepen.io/TheNils/pen/QWjdEOR
The size of some UI elements are fixed; the size of other elements is responsive to the size of the container.
For example, a graph's text and legend is normally fixed size, but its axes' sizes are normally responsive.
<svg font-size="14" height="200" width="100%" shape-rendering="crispEdges">
<rect x="30" y="10" width="120" height="30" stroke="black" fill-opacity="0"></rect>
<text color="black" x="32" y="24">Legend</text>
</svg>
<div style="font-size: 14px; height:200px; position:relative; width:100%">
<div style="position:absolute; top:10px; left:30px; width: 116px; height: 26px; border: 1px solid black; padding: 2px">
Legend
</div>
<div style="position:absolute; top:5px; left:5px; bottom: 5px; right:5px; border-left: 1px solid black; border-bottom: 1px solid black">
</div>
</div>
As far as I can tell, SVGs cannot do this. I can use JS and listen to the window resize event, though this event is not always fired, e.g. when printing.
Is is possible to have fixed and responsive elements in an browser SVG?
From what I'm getting out of your question, listening for a resize event is indeed not going to do the cut for printing. So what you need to do is listen for a print request, and run your resize code from it:
window.addEventListener("beforeprint", beforePrint);
window.addEventListener("afterprint", afterPrint);
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
function beforePrint() {
//Resize for printing
}
function afterPrint() {
//Resize again for after printing
}
This is taken from this article. Please read over it for a more detailed description, limitations, and other possible work-arounds.
For any other situations where you need to resize but the window resize event isn't sufficient, there's usually at least a semi-simple work-around. JavaScript is your only option for something as complex as sorting and sizing items in a graph.
I know this is possible for regular html elements, and I know how to add fill color or a background image to an SVG. But is doing both possible? I'm just trying to add a filter effect to these background(fill) colors.
.element {
background-color: rgba(0,0,0,.1);
background-image: url('images/filter/grunge.png');
}
Your question is unclear.
Do you mean like this?
svg {
background-color: blue;
background-image: url(http://lorempixel.com/300/200/);
background-repeat: no-repeat;
filter: blur(3px);
}
<svg width="400" height="200">
<circle cx="100" cy="100" r="50" fill="red"/>
</svg>
I am having an issue trying to get these 3 divs to line up on the same horizontal pane.
I will also like to know if it is possible to have the color of my circle change based on a value of a variable. I would greatly appreciate an example function.
<html>
<body>
<style type="text/css">
.circle
{
width:115px;
height:115px;
border-radius:250px;
font-size:20px;
color:#fff;
line-height:115px;
text-align:center;
background:#000
}
</style>
<div id="container" style=" border: 2px coral solid; width:100%; height:120px;">
<div class="circle">Hello</div>
<div id="leadInfo" style="width:37%; height:115px; float:left; background-color:yellow;"> </div>
<div id="leadInfo2" style="width:37.5%; height:115px; float:right; background-color:blue;"> </div>
</div>
</body>
</html>
First you wrote
float: leftt;
Instead of
float: left;
Also, try adjusting one of the yellow circles to be less then 37.5%, it somehow goes over 100% in total and jumps down. So 37% will be enough.
<div id="container" style=" border: 3px coral solid; width:100%; height:auto;">
<div id="colorwheel" style="width:25%; float:left; border: 3px coral solid;">
<canvas id="circlecanvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle="red";
context.fill()
</script>
</div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div id="leadInfo" style="width:37.2%; height:108px; float:right; background-color:yellow;border:1px solid red;"> </div>
<div style="clear:both"></div>
</div>
And about changing the color of a circle on canvas...
No, you can't change anything you've drawn on the canvas (including your circle).
That's because canvas doesn't "remember" where it drew your circle. Your circle becomes an un-remembered group of pixels on the canvas.
Therefore, if you want to change anything on the canvas, you must erase the canvas and redraw your circle using the fillStyle in your variable.
// create a variable to hold your desired fill color
var myFillColor="gold";
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// set the context.fillStyle to your variable
context.fillStyle=myFillColor;
// redraw your circle
context.beginPath();
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fill();
Important note: context.arc is a path command and every group of path commands must be preceeded by context.beginPath. beginPath tells the browser you are finished drawing the previous path and are now drawing a new path. Failing to start new paths with beginPath will cause your next context.fill (or context.stroke) command to redraw all previous path commands.