We Keep Coding

Draw New Path beneath Overlay Image

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

How to re-tint a grayscale image on canvas

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!

Canvas custom font renders wrong

Using a custom #font-face within a canvas element, renders fine in DOM, when rendered through canvas it stretches the text vertically. Or might be squashing it horizontally, cannot tell.
CSS:
#font-face {
font-family: 'myFont';
src: url('myFont.ttf');
}
Canvas element width is set to 100% of its parent (a 300x250px square) through CSS, text is added to canvas by:
cContext.fillStyle = "rgba(255,255,255,1)";
cContext.font = '58px "myFont"';
cContext.fillText("1000", 22, 71);

var c = document.getElementById("square");
var ctx = c.getContext("2d");;
ctx.font = "40px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("1000",40,80);
var c2 = document.getElementById("notsquare");
var ctx2 = c2.getContext("2d");;
ctx2.font = "40px Arial";
ctx2.fillStyle = "#FF0000";
ctx2.fillText("1000",40,60);
#square, #notsquare{
border: 1px solid red;
}
#notsquare{
width: 300px;
height: 400px;
left:0px;
}
<canvas id='square' width='300' height='300' ></canvas>
<canvas id='notsquare' width='300' height='300' ></canvas>
Example from #pointy remark.
To specify the width and height of the canvas element you should use the attributes of the element and not css.
if you want to resize the canvas you should do so in the JS like this
Resize HTML5 canvas to fit window

Canvas element lines aren't straight?

I am trying to draw an element on a canvas but whenever I draw the canvas, the lines turn out faded and not bold. I don't understand why this happening with my code.. whenever I try it with code from W3schools it turns out fine. Here is my code and an image below.
<!DOCTYPE html>
<html>
<head>
<title>Talk Walk</title>
<style type="text/css">
#canvas {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 750px;
background-color: blue;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

The problem here is that there's some aliasing going on when you're drawing the rectangles.
This is happening because the "edge" of the green rectangle isn't drawn exactly on a pixel. Normally, you wouldn't really see it, but since you're stretching out the canvas by using css to set it's width and height, you get this result:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
height: 500px;
width: 750px;
background-color: blue;
}
<canvas id="canvas"></canvas>
To fix that, use the width and height HTML attributes, instead of css:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
background-color: blue;
}
<canvas id="canvas" height="500" width="750"></canvas>
This properly scales the canvas, so the aliasing (while still there if you zoom in) doesn't scale up.

How to change the height and width of canvas using css while using fabric

As the title says everything. I want to change the size of my HTML5 canvas. I am using fabricjs library to work with HTML5 canvas. However, fabricjs makes the size of the canvas smaller. Now I want to its size using css but it does not affect it. When I give other css rules to canvas then it does affect but not width and height.
jsfiddle
Here is my fabricjs code
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: 'red',
width: 100,
height: 100
});
canvas.add(rect);
here is my html
<canvas id="c"></canvas>
and here is my CSS
#c {
width: 100%;
border: 1px solid green;
}

Found the answer. Below solution works for me
var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);
Second solution is
<canvas id="c" width="900" height="600"></canvas>