We Keep Coding

Setting Height of Pattern-Image for Canvas

I am drawing frames around some images.
This is my code for drawing the top frame:
this.frame.top.height = this.frame.top.height * this.resizeMultiplyer
const pattern = this.context.createPattern(this.frame.top, 'repeat');
console.log(this.frame.top.height);
console.log(this.frame.top.height);
this.context.fillStyle = pattern;
this.context.fillRect(0, 0, this.canvas.width, this.frame.top.height);
My target is to resize the frame width with on different cases using a resizeMultiplyer that has value between 0 & 1.
Frame is getting drawn but and resize multiplier worked for frame drawing but frame image is not getting resized. So my image is basically cut off. I attaching my output that i am getting using the above code
The output I'm getting:
Output I'm getting
Expected output:
Output Expected

Instead of making the pattern with the image, created another canvas with desired height & width and drew the image inside of it. Then created the pattern using that canvas.

adding image to Javascript canvas using relative file path

I feel like there is a very simple way to do this, yet I can't find it. I have an image whose relative path to my clientscript.js file is ./images/orig classic pokemon frame.png. I want to draw it on the canvas, around the text that is drawn on the very last line of this code snippet:
function render(context) {
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.save();
var imgFrame = new Image();
imgFrame.src = './images/origclassicpokemonframe.png';
imgFrame.onload = function(){
context.drawImage(imgFrame, 0, 0, 30,30);
};
context.font = "24px Early GameBoy";
context.fillText("What? _____", 10, canvasHeight-44); //20 padding plus 24 line height
The text shows up on the canvas, but the frame never does. Changing the dimensions or the x and y coordinates does not make a difference. Any help is appreciated.
EDIT: Changed the filepath to images/origclassicpokemonframe.PNG and now the image shows on canvas in firefox, but not chrome.
help????
Another edit: I can see in the console on both chrome and firefox that the HTTP request is loading it just fine but somehow it just doesn't want to draw on the canvas.

context isn't a global variable. As such, using it in the 'onload' function is out of it's scope.
There was nothing wrong with your src if it would work in an <img> element.

Loading image into canvas - image scaled

I'm having a problem with loading image into canvas - the image is somehow scaled.
Background: I've got several canvases on my web page, I want to load images into them. When constructing, I'm not sure about the dimension, because the size depends on the screen size.
So I create div and canvas, use css to have it in the size that I want it to have and print an image onto the canvas. There would couple more things to do with the image (i.e. decide based on the ratio if I need to center it vertically or horizontally), but those are not really important at this point. The problem is that the image is rendered "zoomed".
Example: the javascript piece is here:
$("canvas").each(function() {
var context = $(this)[0].getContext('2d');
var img = new Image;
img.src = 'http://i67.tinypic.com/n38zdv.jpg';
$(img).load(function() {
context.drawImage(this, 0, 0);
});
//img will print 400 (correct, thats the width of the img)
//canvas will print based on the screen size (correct)
//img displayed in the canvas shows 300px out of 400px, it's zoomed (not correct)
$(this).parent().append(
'img width: '+img.width+
', canvas width: '+$(this).width());
});
I put the whole example with HTML and CSS to https://jsfiddle.net/7zdrfe58/11/.
I'm trying on Mac. Safari and Chrome work the same (i.e. with the zoom).
I would very appreciate help with this!! Thanks a lot

drawImage lets you specify the width and height of the image. You can get the canvas width like so:
$("canvas").each(function() {
var canvas = this;
var context = canvas.getContext('2d');
var img = new Image;
img.src = 'http://i67.tinypic.com/n38zdv.jpg';
$(img).load(function() {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
});
});
Check out your working code here:
https://jsfiddle.net/ucxdLsq9/
The documentation of the drawImage signatures can be found here:
https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage

Give proper width and height to drawImage.
context.drawImage(this, 0, 0 ,300 ,160);
Updated Fiddle

Can we add putImageData to fabric canvas instead of fromURL

fabric.Image.fromURL(hc.toDataURL(), function(img) {
// add image onto canvas
Canvas.add(img);
img.hasControls = false;
img.hasBorders = false;
img.hasControls = false;
img.hasRotatingPoint = false;
img.selectable = false;
});
Above code helps in rendering a image to canvas but I want to use something like putImageData/drawImage because I have to draw the image from another canvas . And as per real time operation using toDataURL for more than 5 MB images is very bad when performance comes to picture.
I also want to render the image on the middle of the canvas .
Fabricjs just takes the image toDataURL and renders it as it is.
Any help will be appreciated.

fabric.Image() just like the row ctx.drawImage accepts a canvasElement as imageSource.
So you can just call it like
canvas.add(new fabric.Image(yourCanvasToDraw));
And if you want it centered in the canvas :
canvas.add(new fabric.Image(c, {left: canvas.width/2-c.width/2, top: canvas.height/2-c.height/2}));
Note that ctx.getImageData+ctx.putImageData is at least as slow as ctx.toDataURLwhich both are incredibly slower than ctx.drawImage

how to draw both image and sketch on canvas together

I want to draw an image to canvas and then allow user to draw some sketch on it by sketch.js. Now the situation is:
1.the image has been drawn on the canvas successfully
2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)
so, I've made both functions right, but I'm confused about the part in between. I hope to draw the sketch on the canvas with the image on it. Here is my code:
index.html:
<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>
canvas.js:
var mysketch = jQuery("#mysketch");
// draw the captured image to canvas
var displayImage = function() {
var context = mysketch.get(0).getContext("2d");
var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0);
}
// prepend the required image info again
image.src = dataURL;
// call sketch.js to draw sketch on the canvas
mysketch.sketch({defaultColor: "#ff0"});
}

I think that, on your call to sketch method
sketch.js is clearing the canvas first then allows you to draw something on it.
As you can see in the link here, in the 3rd example (i.e. Tools Example) the image is not drawn by drawImage method.
It is actually the background of the canvas which will always be there as background, whatever you draw on it.
So what you can do is:
either do same thing as in the example i.e. set your image as background,
or make a new canvas just behind your canvas with same width, height and on same location and draw your image on it. and do your sketch thing on the second one.