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.
Related
for some reason my html5 canvas is not showing up in the browser.
I am trying to draw a black square its just not loading the browser is just an empty page...
Please help me i dont know whats wrong..
<html>
<head>
<title>setup</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var canvas
var canvasContext
window.onload = function() {
canvas = document.getElementById("myCanvas")
canvasContext = canvas.getContext("2d")
canvasContext.fillStyle = "black";
canvasContext.fillRect(0,0,canvas.width,canvas.height)
canvasContext.fillStyle = "red";
canvasContext.fillRect(125, 250, 75, 75)
}
</script>
</body>
</html>
Your canvas 'is' there - it's just a white (empty) blob however.
None of your interactions with it work as you've tried to find it using the ID "myCanvas" rather than just "canvas" which is the ID you used in your HTML.
If you change this line:
canvas = document.getElementById("myCanvas")
to
canvas = document.getElementById("canvas")
It should work for you
This is the answer for the question:
canvas = document.getElementById("canvas");
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 working on plotting pinpoint images over another image using canvas. I am new to canvas; kindly guide me further on this.
I have taken an img element and copied it in a canvas. Now I am trying to put another image over that canvas object but it's not working.
Here's my Fiddle.
HTML:
<p>Image to use:</p>
<img id="scream" src="https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button id="button1">Copy Imange</button></p>
<p><button id="button2">Draw OVer copied image</button></p>
Code:
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
});
$("#button1").click(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.drawImage("https://cdn3.iconfinder.com/data/icons/social-media-icons/32/Location-512.png",10,10);
});
There are a couple of issues. Firstly, you click events are both looking for the element $("#button1"). I'm assuming the second click event is supposed to be for $("#button2")
The next problem, in your second click event you are using drawImage from a URL to an image. You can't do that directly, you need to create a new image and set the source property like so:
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
You also shouldn't set the canvas and context on every click, you only need to do that once. Here is the complete example (working example):
$(document).ready(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
var img2 = new Image();
img2.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
$("#button1").click(function(){
ctx.drawImage(img,10,10);
});
$("#button2").click(function(){
ctx.drawImage(img2,10,10);
});
});
I want to get html canvas image as javascript object. I looked samples from internet. But all samples are getting images from a source to canvas like this:
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
But my problem: There is an image on canvas element that created by pencil. I want to get that image as object and post to server. But I could not get.
have you tried canvas.toDataURL()?
more hardcore way might be canvas.getContext('2d').getImageData() would return ImageData object.
I have just started learning how to draw on using HTML5 canvas, I'm trying to make a simple square but all I get is a blank screen, I don't get errors in the chrome console either
<!Doctype html>
<html>
<head>
<title>Drawing to a canvas</title>
<script type="text/javascript" language="javascript" >
window.onload = draw;
function draw()
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect = (36,10,50,50);
}
</script>
</head>
<body>
<canvas id="canvas1" width="400" height="300">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
</body>
</html>
This seems quite simple but it just won't work for me!
One error is the one Elon pointed out, but you are using the fillRect wrong as well:
ctx.fillRect = (36,10,50,50);
should be:
ctx.fillRect(36,10,50,50);
Please debug before asking for help!
You've got syntax error because you forgot about { after function name.
function draw() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(36,10,50,50);
}