I have an Image object like below:
imgObj = new Image();
imgObj.src = "http://localhost/images/img1.png";
imgObj.onload = function () {}
and I want to draw this image on a canvas when a button clicked. In each click the image draws on it but I want to rotate object before drawing because I don't want the result fall over and I need it seen differently.
I'm using javascript and jQuery in my project. so is there any solution for this?
This should work:
imgObj.style.transform = "rotate(90deg)"
It sets the transform css style property on the image object.
Related
I'm trying to code some simple game and I'm stuck at drawing an assets on the canvas. I have made an AssetsLoader "class" that loads images and save them as image objects. For the start I just wanted to draw some of the loaded assets. But drawImage function doesn't show anything....I know that my image is loaded by writing object on consol which gives me this output: <img name="player" src="../assets/images/player.png">
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
if(!context){
alert('Upgrade browser');
}else{
startGame();
}
function startGame(){
AssetsLoader.getAllAssets();
console.log(AssetsLoader.images.player); // image is loaded
context.drawImage(AssetsLoader.images.player, 0, 0); // doesn't work
}
EDIT:
ok my bad, I put '../' in front of the image path because my project structure look like this:
assets
images
player.png
js
script for AssetsLoader
and I thought I have to go down one level to access image.
I actually just fixed this on my canvas. The fixed code would be:
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var img1 = new Image();
img1.src = "../assets/images/player.png";
context.drawImage(img1,100,100);
The reason why you make the img1 var is because that adds the img element to the canvas. Then with img1.src you set the source of the image. When I do drawImage(), first, I insert img1 which includes the source of the image. The second parameter is the X position and the third parameter is the Y position.
I created a canvas in HTML5 and painted the grid on it.
After I added the rectangle through fabricjs and my painted grid disappeared! I don't want that the grid disappeared.
What should I do?
I've decided my problem as follows:
1) I've saved my canvas to base64
2) I've set my saved canvas (base64) as background for fabricjs canvas
My code (coffeescript):
gridImageFromCanvas = #canvas.toDataURL()
backgroundImage = new Image()
backgroundImage.onload = =>
fabricaBackgroundImage = new fabric.Image(backgroundImage)
#canvasFabric.setBackgroundImage(fabricaBackgroundImage)
#canvasFabric.renderAll()
backgroundImage.src = gridImageFromCanvas
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.
How to resize image already drawed in canvas?
I tried this with no luck (image is showing, but it doesn't resize):
var drawBall = function(mouseX, mouseY){
ballimg = new Image();
ballimg.onload = function(){
ctx.drawImage(ballimg, mouseX-25, mouseY-25);
ballimg.height = 5;
throwed = true;
};
ballimg.src = "ball2.png";
};
You can not resize an object which is drawn on the canvas.
What you need to do is redraw your object.
clear the context where the old Ball is located ctx.clearRect(x,y,x2,y2)
and draw a new Ball with the new size.
If you want to animate things on the canvas. The way you do that is to keep track of all your objects and redraw the canvas(every single object) for every frame.
Is it possible to use imagename.readyState in canvas?
If not does anyone know a way of detecting when an image being drawn to the canvas using "drawImage" has loaded and is ready to display?
I am creating an image showcase using the canvas - when an image is selected I want to have a loading animation (which I have already created) display until the loaded condition is met.
I am still learning to use javascript and have been trying all day to no avail - so apologies for the lack of example code to display and illustrate what I'm asking!
You might try loading the image by using new Image() and setting the .onload event to draw the image on the canvas after the image has been loaded.
var img = new Image();
img.onload = function() {
// code to draw image on the canvas...
}
img.src = "/path/to/img.jpg";
See also: https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html