Is it possible for an animation built with Flash Canvas to be responsive in the browser? By that I mean that I would like both the canvas and the animation itself to re-size themselves based on the size of the browser window while maintaining the original aspect ratio.
The code I get from publishing my canvas is the following and although I've been trying all day to figure this out, I can't get it right.
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test_1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
and
<canvas id="canvas" width="640" height="360" style="background-color:#FFFFFF"></canvas>
Can someone please help me? I don't have a lot of experience with java script or canvas and my attempts at updating the code haven't gotten me too far. With the help of another post here on stackoverflow I managed to have my canvas be responsive, but not the animation too. The animation just stayed in the same spot. Thank you very much in advance! Bellow is the code that made my canvas responsive if its any help:
<script>
var canvas, stage, exportRoot, myCanvas;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.test_1();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
var myCanvas = document.getElementById("canvas");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
window.addEventListener("resize", resizeCanvas, false);
function resizeCanvas (e) {
var myCanvas = document.getElementById("canvas");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
}
}
</script>
I found a solution that works on the Adobe Forums. It's not 100% perfect but it does the job:
https://forums.adobe.com/message/6405264
Basically just doing it through CSS and adding a width of 100% to your canvas scales both the canvas and the animation properly. So your canvas would look something like this:
<canvas id="canvas" width="720" height="660" style="background-color:#FFFFFF; width: 100%;"></canvas>
The issue with this solution is that while it scales both the canvas and the animation, it doesn't scale it as a vector so the quality may vary. In my situation, the animation is only about 10kb so I'm going to create it in about 3 different sizes, 300px apart to help with that.
A side note which may help some with more experience in javascript is that if you put all of your movieclips and animations into one parent one, when you publish it from flash you'll see something like this within the first few lines of code in your .js file:
this.my_anim_container.setTransform(360,329.2,2,2,0,0,0,0,8.6);
The 2 "2"s control the scale of your animation, so if you were to change them to 3 for example, your animation would now be enlarged. Figuring out a way to modify that based on your browser size would be even better, but I personally don't have the javascript knowledge for it.
Related
Computer with hdpi screen are more and more common and I own one.
I'm building a webpage with a P5.js canvas inside it filling a div.
I have absolutely no problem till this point, but as I have an hdpi screen the number of pixels to render is tremendous and it's very hard to render smoothly.
what I would like to do: render a low-resolution canvas an stretching it to fill all the space. But I have no ideé how to achieve this or even if it's possible.
function setup() {
var canvasDiv = document.getElementById('myCanvas');
var divWidth = canvasDiv.getBoundingClientRect().width;
var divHeight = canvasDiv.getBoundingClientRect().height;
var sketchCanvas = createCanvas(divWidth,divHeight);
sketchCanvas.parent("myCanvas");
background(0)
}
function windowResized() {
var canvasDiv = document.getElementById('myCanvas');
var divWidth = canvasDiv.getBoundingClientRect().width;
var divHeight = canvasDiv.getBoundingClientRect().height;
resizeCanvas(divWidth, divHeight);
background(0)
}
function draw(){
}
Step one: Create an off-screen buffer using the createGraphics() function. More info can be found in the reference. Give it whatever low-res size you want.
Step two: Draw your scene to that off-screen buffer. Use its width and height to draw stuff to scale.
Step three: Draw the off-screen buffer to the screen, using the image() function, which takes parameters for the size to draw. Use the size of the canvas as the arguments. Again, more info can be found in the reference.
You'll still be drawing the same amount of pixels, but that's how you'd draw to a small buffer and resize it to match the canvas size.
If you're still having trouble, please post a MCVE in a new question post, and we'll go from there. Good luck.
Alright so I got this issue.
I am currently making a City Map (village) for my game, but the problem is building placing. How do I achieve this?
Now im taking for example Ikariams map as an example, testing grounds. Now this is the map itself
http://www.mmoreviews.com/imgs/Ikariam-shot-1.jpg
Now how do I place the buildings in? Getting coordinates of where the building should be and then just fit in the building.png into it or?
A good solution for that is using the HTML5 Canvas element. That allows you to have a background image and draw other images on it. Drawing lines, circles is quite simple as well (that can be animated with javaScript).
You need the canvas itself:
<canvas id="canvas" width="800" height="600">
</canvas>
Some CSS:
canvas{
background-image: url('village.jpg');
}
And some lines in your <script>
var canvas = document.getElementById("canvas");
var map = canvas.getContext("2d"); //main object to draw
var house=new Image();
house.src='house.jpg';
house.onload=function(){
map.drawImage(house, 80,80); //actually drawing and giving coordinates
}
Hope it is helpful.
How can I achieve, so that the HTML5 canvas element ist resizeable?
I would like to implement this element so that you can scale it in any size. The event of the scaling should be the mouse which snaps the edge and the user resizes the element.
I've already read about how you can achieve this on a object in the canvas element. But in my case I need this on the canvas element itself (<canvas>).
Setting a canvas's width or height properties has the effect of clearing the canvas. Even canvas.width = canvas.width; will cause you to lose everything in the canvas. Sometimes this is desirable, but in your case it probably isn't.
What you will probably need to do is something like this
var myCanvas = document.getElementById('myCanvas');
var tempCanvas = document.createElement('canvas');
tempCanvas.width = myCanvas.width;
tempCanvas.height = myCanvas.height;
// save your canvas into temp canvas
tempCanvas.getContext('2d').drawImage(myCanvas, 0, 0);
// resize my canvas as needed, probably in response to mouse events
myCanvas.width = newWidth;
myCanvas.height = newHeight;
// draw temp canvas back into myCanvas, scaled as needed
myCanvas.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, myCanvas.width, myCanvas.height);
In most browsers, the scaling will be done with a bicubic scaling algorithm, causing it to get blurry. In some cases you can set a CSS property to cause nearest neighbor on the canvas if you want, but browser support for this is very spotty right now. You can instead manually do a nearest neighbor scale , as this question shows: How to stretch images with no antialiasing
Alternative CSS Approach
Another approach is to scale the canvas using CSS. In Chrome/Safari/IE you can just do:
<canvas style="zoom:200%" />
In Firefox, you can use a scale transform to achieve the same effect:
<canvas style="-moz-transform:scale(2)" />
In many ways this approach is easier, but it comes with its own little gotchas and browser specific quirks.
I think you need to bind the onresize event to your body of document.
Then inside the the event you need to resize the canvas using window.innerWidth and window.innerHeight.
Have a look # http://kile.stravaganza.org/lab/js/canvas_resize/ (view source)
Although it's a bit late to answer this question, I'd like to share what I found to solve the same question. Take it a look please.
panel.css
#Panel {
width: 100%;
height: 30%;
}
app.js
var widthG = 0, height=G = 0;
function updateScale() {
widthG = parseInt($('#Panel').width());
heightG = parseInt($('#anel').height());
}
...
function updateCanvas() {
ctx = $('#canvas').get(0).getContext('2d');
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
ctx.canvas.width = widthG;
ctx.canvas.width = heightG;
}
I also tried to re-assign these properties by css syntax, but it doesn't work.
$('#canvas').width(panelW);
$('#canvas').height(panelH);
Hope this helps ppl suffered from the same question.
I am trying to draw a shape on an HTML5 canvas but have the shape appear in a div (that can be manipulated by javascript). How can i do this? I would post code but i dont even know where to start with this. Please help.
To clarify: i want the shapes rendered on the canvas to be placed in divs. Sorry for any confusion.
Mozilla Drawing: https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
<div>
<canvas id="my_canvas"></canvas>
</div>
<script>
var canvas = document.getElementById('my_canvas');
// Set width height. You should probably use the width/height of the div.
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext('2d');
// Draw something with ctx.....
// ....
</script>
You could use the library Canvas2Image. It will allow you to convert what's on the Canvas into an image. There are some quirks on a per browser basis, but it is the closest thing to what you want to do without having to put many canvas elements on your page that you update in tandem.
I have a html page like this:
<html>
<body>
(1)<canvas id="cs"></canvas>
(2)<img src="/image.png" id="img"/>
</body>
</html>
I would like to know how I could load and display the image (2) in the canvas (1) (with drawImage function).
I tried this but it doesn't work :
var img = $("#img");
ctx.drawImage(img,0,0);
You have to ensure that your image has loaded first. Try wrapping your drawImage call in a ready statment and make certain you are setting up your canvas object first.
$().ready(function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.getElementById("img"),0,0);
})
If you haven't already found it here is a nice tutorial: https://developer.mozilla.org/en/Canvas_tutorial/Using_images
Is that all of your code?
You need to set up the canvas first:
var ctx = document.getElementById('cs').getContext('2d');
var img = new Image();
img.src=document.getElementById('img').src;
ctx.drawImage(img,0,0);
Something like that...
Here's an example in jsfiddle: http://jsfiddle.net/vTYqS/
Note that the first picture gets cut off because of the default canvas size. Depending on the image you plan to copy, you may need to resize your canvas like this:
http://jsfiddle.net/vTYqS/1/