JavaScript drawImage() doesn't work - javascript

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.

Related

Rotating an Image object before drawing on canvas - HTML

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.

How to make a copy of image without src?

I have to make a copy of given image after it's loaded. The problem is that the image is not usin static url and the image is different each time, it's generated with php on the server side. The link keeps the same every time. What I have to do is to make a copy of this already loaded image. How can I do that using HTML5 and canvas, or is there any other way to do that? I know that it can be done with canvas, but I need the src of the image. The problem is that it's not a static url, and when I do it, I get another picture instead of the loaded one. Any ideas?
You can use a canvas; it's pretty simple:
<img src=http://placekitten.com/300/340 id=kitteh>
<canvas id=c></canvas>
JS:
var canvas = document.getElementById("c"),
kitteh = document.getElementById('kitteh'),
ctx = canvas.getContext('2d');
canvas.height = kitteh.height; canvas.width = kitteh.width;
ctx.drawImage(kitteh, 0, 0);

take screenshot of a page area and put it on another page

Good evening guys.
I'm working on a project in which i have an image upload canvas with draggable elements to put it over the uploaded image.
Is kinda messy right now, as the elements are absolute positioned to a 800px resolution. Here is the demo.
What i need now is to have a button that takes an screenshot of the canvas region, and then takes this screenshot to another canvas in another page.
Is that possible?
Yes it is possible.
1) First convert the canvas to to data url like this :
var dataURL = canvas.toDataURL();
2) Pass this value to next page.
3) Then load that url :
function loadCanvas(dataURL) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// load image from data url
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(this, 0, 0);
};
imageObj.src = dataURL;
}
For more details refer :
Converting Data Url: http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/
Loading Data Url : http://www.html5canvastutorials.com/advanced/html5-canvas-load-image-data-url/

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.

Javascript draw dynamic image from URL onto canvas element

I am attempting to draw a dynamic PNG image (one that is generated by a PHP script) onto a Canvas element using its URL. I can't really post exact URLs for pages I'm testing this out on, as you must be logged in to the website.
An example of one of the dynamic image URL I'm using is: http://www.website.com/includes/dynamicimage.php?ID=29718958161
If you were logged into this particular website and pasted that URL into your address bar, it would correctly display the image. However, the following Javascript code is not properly drawing it onto the canvas element:
function checkImage(imageContext) {
var canvas = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'canvas');
canvas.width = imageContext.width;
canvas.height = imageContext.height;
var context = canvas.getContext("2d");
var img = new Image();
img.src = imageContext.src;
context.drawImage(img, 0, 0);
newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300');
newWindow2 = window.open('', 'newWin2', 'width=300,height=300');
newWindow2.document.body.appendChild(canvas);
var imgd = context.getImageData(0, 0, imageContext.width,
imageContext.height);
var pix = imgd.data;
}
I'm having two pop-up windows display both the dynamic image and what is drawn to the canvas, but the canvas is always blank. I am then attempting to do further RGB testing on the image after setting the "pix" variable, but since the image is never drawn to the canvas element, this step fails.
Your problem is that you are not waiting for the image to load before attempting to draw it to the canvas. See the section titled "Playing It Safe" in this question for more details.
In short:
var img = new Image; // First create the image...
img.onload = function(){ // ...then set the onload handler...
ctx.drawImage(img,0,0);
};
img.src = "someurl"; // *then* set the .src and start it loading.

Categories