I'm in the final stretch of the game and when I put the background image, it overlaps the Canvas, how do I fix this? - Google translator
game
game with background
make the image as css background-image of the elements that contains the canvas or make the image absolute with lesser z-index value than the canvas
You can make use of drawImage property of canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var background = new Image();
background.src = "https://cdn0.iconfinder.com/data/icons/is_google_plus_one_icons/256/google_plus_one_-plus-1_canvas.png";
background.onload = function(){
ctx.drawImage(background,0,0, 200, 100);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Make use of onload property of image to draw the canvas contents.
Related
This question already has answers here:
Canvas width and height in HTML5
(3 answers)
Closed 2 years ago.
I would like to dynamically create a canvas, specifying the dimensions of the canvas at runtime; then I'd like to render an image over that canvas so that it fills the entire dimension of the canvas.
This works as expected, when I declare a canvas's width & height on an <canvas> element, as shown in this snippet (hidden by default):
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" width="200" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
However, if I dynamically create the <canvas> element using Javascript, and use CSS to set the size after creating, the image will not fill the whole canvas:
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
c.style.width = "200px";
c.style.height = "200px";
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
I feel like I'm missing something pretty obvious here -- any help would be appreciated on how to get the dynamically rendered Canvas to look like the first snippet.
By using c.style.width, you're defining a scale for displaying it on your screen (it's just CSS).
To actually set the intrinsic size of the canvas, you do this:
window.onload = function() {
var c = document.getElementById("canvas");
c.width = 200;
c.height = 200;
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
<h3>Source Image</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>
Note: This does not prevent you from having a different intrinsic size and display size. In fact, it's often useful if your page is displayed on a Retina screen with a high pixel density. In that case, you can have a 200x200 canvas, and set its CSS dimensions to be 100x100. That way every pixel in the canvas will be exactly 1 pixel of the screen it's displayed on.
More info on window.devicePixelRatio if you're interested.
I am making a drawing app in fabric.js.
I want to ignore the black area of image to be colored in.
Any suggestions please????
Click the link for image
You can use the image as overlay.Please check here:http://jsfiddle.net/mariusturcu93/s5wxbcde/19/
JS
var canvas = new fabric.Canvas('canvas');
canvas.backgroundColor = "blue";
canvas.isDrawingMode=1;
canvas.setOverlayImage('https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png/revision/latest/scale-to-width-down/381?cb=20120718024112', canvas.renderAll.bind(canvas), {
width: canvas.width,
height: canvas.height
});
HTML
<canvas id="canvas" width="800" height="800"></canvas>
The publish output of Animate CC gives html file and js file. I want to draw the same drawing two times in the same canvas. From this example, i want to have output as
How can i change the javascript to achieve this without having two canvas tag? I want to have numerous instance of it in single canvas tag.
If you are trying to achieve the image above, you can simply create two instances of simple_canv class.
Try this:
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRootLeft = new lib.simple_canv();
exportRootRight = new lib.simple_canv();
exportRootRight.x = 555;
stage = new createjs.Stage(canvas);
stage.addChild(exportRootLeft, exportRootRight);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
init_app()
}
Also, remember to increase the width of your canvas.
Is this what you are looking for?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(0,0,50,50);
ctx2.fillStyle = "blue";
ctx2.fillRect(50,0,50,50);
</script>
</body>
</html>
You can then change what you render.
Currently there are are two images I would like to rotate on the canvas, I tried save and restore but didn't work
function SetCanvas()
{
var canvas = document.getElementById('pic1');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
// ctx.save();
ctx.rotate(0.5);
var image = new Image();
image.src ='ME.JPG';
image.onload = function(){
ctx.drawImage(image, 90,0,200,100);
};
}
//ctx.restore();
var canvas2 = document.getElementById("pic2");
var image2 = new Image();
image2.src = 'ME2.JPG';
if(canvas2.getContext)
{
image2.onload = function(){
ctx2=canvas2.getContext('2d');
ctx2.drawImage(image2, 0,0,200,100);
};
}
}
<ul id="picsCanvas" style="overflow:hidden;white-space:nowrap; list-style-type:none;">
<li style=" display:inline; float:left" id="first">
<canvas ID="pic1" width="300" height="360" ></canvas>
</li>
<li id="second" style="margin-top:0px; display:inline; float:left; position:absolute ">
<canvas id="pic2" width="300" height="360" style="position:absolute" ></canvas>
</li>
</ul>
Please note that the code might not be correct as it is something I did a while ago, I just want to get an idea of how to do it and if it is possible... thanks for your help.
The images are loading asynchronously. This means that that entire function (minus the onload handlers for the images happens first. Then when the images are loaded, their handlers are called. This happens in a second pass. By the time this happens, you already rotated and restored the canvas, effectively wiping the rotation out.
The simple fix is to rotate and restore the canvas inside each of the image onload handlers.
These two links give a pretty good explanation and example of how to rotate with HTML5 canvas
https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
You set the different angles when you rotate (see code example below).
The general gist of it is:
1) save the context
2) transform to, usually, the center of the image
3) rotate
4) transform back
5) draw image
6) restore
In your case, with two images, you need to transform the origin to the second image before you make the second rotation call. Below is a simplified example rotating one image. Get that sorted and then make the second transform/rotate.
Example:
var canvas = document.getElementById("yourCanvas");
var ctx = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
angle = angle+1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.fillStyle = "#FF0000";
// first image
ctx.translate(150,200);
ctx.rotate( angle*Math.PI/180 ); // rotate 90 degrees
ctx.translate(-150,-200);
ctx.fillStyle = "black";
ctx.fillRect(100, 150, 100, 100);
ctx.fill();
ctx.restore();
}, 5);
I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas.
Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.
Here's my code:
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Thanks in advance!
PS: I added the parseInt's to make sure that drawImage gets valid values.
Don't use CSS to size your canvas. That creates a default sized canvas and stretches it. Set the canvas dimensions directly on it and you'll get a 1 to 1 pixel drawing space.
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
Trochoid is right, the style attribute on your canvas tag is causing problems. You could set it in the HTML, as he suggests, or better yet you can leave it blank and set it dynamically in the JS:
<canvas id="story"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
canvas.height=height;
canvas.width=width;
context.drawImage(img, 0, 0);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Also make sure you get the width and height of the image and draw it AFTER it has been loaded.
img.onload = function () {
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
};
You have to first load the function image perfectly before rendering on the screen to do that follow the below code..
<img id="demo-img" src="image_name.png">
<br>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("demo-img");
img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
</script>
Try using this library I recently created which can load an image, resize it fixed width & height or precentage, convert to and from other formats like base64 or blob, and allows you to apply a watermark.
var CanvaWork = new CanvaWork();
CanvaWork.loadImage("yourimage.png", function(obj){
console.log(obj.canvas); // The usable canvas
console.log(obj.width);
console.log(obj.height);
console.log(obj.image); // Contains the image file
});
https://github.com/vnbenny/canvawork.js
Hope this helps you!