I wonder if I make a Flash HTML5 Canvas Banner at 300x250 to start, how can I make it expand down the page and extend the canvas size?
Try this:
var originalHeight = this.stage.canvas.height;
var expandedHeight = 300; // Put here your desired height
this.stage.addEventListener("mouseover", mouseOverHandle);
function mouseOverHandle() {
this.stage.canvas.height = expandedHeight;
this.stage.addEventListener("mouseleave", mouseLeaveHandle);
this.stage.removeEventListener("mouseover", mouseOverHandle);
}
function mouseLeaveHandle() {
this.stage.canvas.height = originalHeight;
this.stage.addEventListener("mouseover", mouseOverHandle);
this.stage.removeEventListener("mouseleave", mouseLeaveHandle);
}
You will see some flickering, because the canvas redraw their content on resize. See this question for more info Flickering during resizing of HTML5 canvas
Click on the canvas then there properties tab and FPS ,Size in then change size to if you want size
Related
I'm using fabricjs, and when I try to resize the whole canvas, I'm having troubles with some things. This is part of my code now:
<div id="cont2" class="cont2">
<div id="cont" class="container-div-canvas">
<canvas id="c" width="500" height="428"></canvas>
<div class="backgroundimage-div" id="bckimg-div"></div>
</div>
</div>
<script>
document.getElementById("resizecanvasbtn").onclick = () => {
document.getElementById("cont").style.width = "1000px";
document.getElementById("cont").style.height = "856px";
document.getElementById("cont2").style.width = "1000px";
document.getElementById("cont2").style.height = "856px";
document.getElementById("c").width = 1000;
document.getElementById("c").height = 856;
document.getElementById("c").style.width = "1000px";
document.getElementById("c").style.height = "856px";
document.getElementById("bckimg-div").style.width = "1000px";
document.getElementById("bckimg-div").style.height = "856px";
}
</script>
This is the canvas:
This is the canvas when I resize it:
And this is the result when I try to move a component that has been aded before the canvas resizing (the whole glitch is the result of when I move one element arround the canvas):
When I add an element after I resize the canvas, it automatically appears on another z-index (I think) and I can't even move it.
I'm not sure where I have the problem, or which thing I'm not having on mind when resizing the canvas.
Any suggestions on where to begin?
Thanks
It results that the document.getElementById("c").width = 1000; does not change the resolution of the canvas at all.
Instead how it needs to be done is with:
canvas.setWidth(1000);
That will change not only the canvas but the canvas-container and the upper-canvass divs that fabricjs generates automatically, which leads on the canvas size.
Hope it helps anybody:)
I have the canvas
<canvas id="canvas" width="1700" height="679" style="background-color:#ffffff;width:100%;overflow:hidden;margin-top: -7px;"></canvas>
It work fine on chrome and firefox. However, ie can work only with width:100% but not change the height (height on 679)
I try height to be auto and 100% but getting wose
Edit: finally! I got it.
It's true that the canvas content will be not good at width 100%.
However, for the height (IE9 above is work) you have to set height style
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
And use Jquery to re-size the canvas
function resizeIE()
{
canvas = document.getElementById("canvas");
if($.browser.msie) //only IE
{
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first
if(window.innerWidth<960) //for other device (only for me)
{
var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
//to make the ratio of canvas find the pencentage
//ex. canvas height: 1700px canvas width: 679px;
//(679*100)/1700 = 39.941 <-- use this one
//best solution
}
else
{
var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
}
}
for re-size window apply on document.ready
window.onresize = function(event) {
resizeIE();
};
If you use CSS to resize canvas you are actually reshaping the canvas's viewport.
Think of this as scaling the image. Just like when you resize a .jpg image, you can get pixilation and distortion.
Instead resize the canvas element's size.
Think of this as adding more empty pixels to the width and height of the canvas, rather than "stretching" the existing pixels.
Here's how to add pixels to the canvas element to make it 100% of the browser window:
var canvas=getElementById("myCanvas");
canvas.width= window.innerWidth;
canvas.height=window.innerHeight;
If you are resizing your browser window, you can put this code in the windows resize handler to make it happen automatically.
Note: Whenever you resize the canvas this way, you will have to redraw the canvas contents.
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
And use Jquery to re-size the canvas
function resizeIE()
{
canvas = document.getElementById("canvas");
if($.browser.msie) //only IE
{
$("#canvas").attr('style','background-color:#ffffff; width:100%;height:679px;overflow:hidden;margin-top: -7px;');
//set the height style first
if(window.innerWidth<960) //for other device (only for me)
{
var height_ie = (window.innerWidth*39.941176470588235294117647058824)/100;
//to make the ratio of canvas find the pencentage
//ex. canvas height: 1700px canvas width: 679px;
//(679*100)/1700 = 39.941 <-- use this one
//best solution
}
else
{
var height_ie = window.innerHeight-160; //just for the logo for my web
}
canvas.style.height = height_ie+"px";
}
}
for re-size window apply on document.ready
window.onresize = function(event) {
resizeIE();
};
I have a page which allows you to browse in an image, then draw on it and save both the original and the annotated version. I am leveraging megapix-image.js and exif.js to help in rendering images from multiple mobile devices properly. It works great, except in certain orientations. For example, a vertical photo taken on an iPhone4s is considered orientation 6 by exif and gets flipped accordingly by megapix-image so it's rendered nicely on the canvas. For some reason, when I draw on it afterward, it seems like the drawing is reversed. Mouse and touch both behave the same way. The coordinates look right to me (meaning they match a working horizontal pic and a non-working vertical pic), as does the canvas height and width when megapix-image.js flips it. This leads me to believe it has something to do with the context, but honestly, I am not really sure. I have a JS fiddle of the part of my work that shows the behavior. Just browse in a vertically taken pic from a mobile device or take a pic in vertical format on a mobile device and use it. I think all will show this same behavior.
The final rendering is done like this:
function RenderImage(file2) {
if (typeof file2[0].files[0] != 'undefined') {
EXIF.getData(file2[0].files[0], function () {
orientation = EXIF.getTag(this, "Orientation");
var file = file2[0].files[0];
var mpImg = new MegaPixImage(file);
var resCanvas1 = document.getElementById('annoCanvas');
mpImg.render(resCanvas1, {
maxWidth: 700,
maxHeight: 700,
orientation: orientation
});
});
}
}
But the full jsfiddle is here:
http://jsfiddle.net/awebster28/Tq3qU/6/
Does anyone have any clues for me?
If you look at the lib you are using there is a transformCoordinate function that is used to set the right transform before drawing.
And they don't save/restore the canvas (boooo!!!) so it remains with this transform after-wise.
Solution for you is to do what the lib should do : save the context before the render and restore it after :
function RenderImage(file2) {
// ... same code ...
var mpImg = new MegaPixImage(file);
var eData = EXIF.pretty(this);
// Render resized image into canvas element.
var resCanvas1 = document.getElementById('annoCanvas');
var ctx = resCanvas1.getContext('2d');
ctx.save();
//setting the orientation flips it
mpImg.render(resCanvas1, {
maxWidth: 700,
maxHeight: 700,
orientation: orientation
});
ctx.restore();
//...
}
I ended up fixing this by adding another canvas to my html (named "annoCanvas2"). Then, I updated megapix-image.js to include this function, which draws the contents of the new canvas to a fresh one:
function drawTwin(sourceCanvas)
{
var id = sourceCanvas.id + "2";
var destCanvas = document.getElementById(id);
if (destCanvas !== null) {
var twinCtx = destCanvas.getContext("2d");
destCanvas.width = sourceCanvas.width;
destCanvas.height = sourceCanvas.height;
twinCtx.drawImage(sourceCanvas, 0, 0, sourceCanvas.width, sourceCanvas.height);
}
}
Then, just after the first is rotated and flipped and rendered, I rendered the resulting canvas to my "twin". Then I had a nice canvas, with my updated image that I could then draw on and also save!
var tagName = target.tagName.toLowerCase();
if (tagName === 'img') {
target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
} else if (tagName === 'canvas') {
renderImageToCanvas(this.srcImage, target, opt, doSquash);
//------I added this-----------
drawTwin(target);
}
I was glad to have it fixed so I met my deadline, but I am still not sure why I had to do this. If anyone out there can explain it, I'd love to know why.
Canvas element not being passed with correct height and width to a function, for now I fixed the problem by again assigning the height and width of the canvas after it has been passed to the accepting function. As I am new to this so I want to know if this is a problem with canvas or not?.
$(document).ready(function(){
calling_function = function(eventObj){
//some code
ajaxOptsFtn = {
url: '/xyz_data/',
dataType: 'json',
data: form_vals,
success: function(resp){
//initialisation for function.
if(resp.var_ready === true){
//dynamically adding canvas element.
var canvas_obj = $('<canvas/>').css({width:160, height:240});
$(clicked_element).children('canvas').remove();
$(clicked_element).append(canvas_obj);
//intilise other arguments with some values
var x = 30;
var y= http://abcs.com/dds.jpg;
var z = resp.apparel_img_url;
var nl = gamma_value;
var wD = 23;
var wU = 26;
acceptingFunction(canvas_obj[0],y,z,x,n,wU,wD);
}
else{
console.log('some other message');
}
},
};
if (data.var_ready) {
$.ajax(ajaxOptsFtn);
}
else{
console.log('some message');
};
};
acceptingFunction = function(canvas_obj,y,z,x,n,wU,wD){
canvas = canvas_obj;
console.log("canvas passed height and width:"+ canvas.height +","+canvas.width);
console.log("re assigning expected values");
canvas.width = 160;
canvas.height = 240;
var context = canvas.getContext('2d');
//some code
AimageObj.onload = function () {
//some code
};
BimageObj.onload = function () {
//some code
};
};
You must set the size of the canvas using its attributes, not CSS - for example:
var canvas_obj = $('<canvas/>').attr({'width': 160, 'height': 240});
If you don't do this the canvas element will default to size 300 x 150 pixels which is only stretched by CSS (like an image).
And likewise you also read the same attributes/properties when you want to get the canvas' size.
I have written a blog post that explains this in details - it's too long for SO but here is the essential part:
If we don’t set any actual size for the canvas’ source bitmap it will
default to 300 x 150 pixels as per specification. If you now set the
CSS size of the element to lets say 900 x 450 pixels what happens is
that those 300 x 150 pixels are simply scaled to the new size as the
CSS applies to the element while the default 300 x 150 applies to the
source bitmap (ie. the image). The applied CSS rule doesn’t do
anything with the actual bitmap size.
It would be exactly the same if the canvas was an image, which works
in a similar fashion: it has the image element and then the source
bitmap – the image itself. If you choose to use a different size for
the element than what the image is, the image is simply stretched but
its original data stays the same. There are no more or less pixels in
the original image.
It's also very easy to do it from an HTML5 standpoint. As Simple as:
<canvas id="canvasName" width="160" height="240">
<p>Sorry, The Canvas element is not supported in this browser :(</p>
</canvas>
Adding the paragraph makes it so that a browser that doesn't support the Canvas (IE6 for example) makes this line pop up instead of the Canvas. But putting this into the HTML5 file makes it simple for drawing the Canvas which can be worked with with Javascript. Just make sure you load the Canvas before you load the Javascript, otherwise it will crash
You would then have to declare it in Javascript with
var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");
And you can Console.log it to make sure it is connected properly
I need to get a background on canvas using layers. Variable for it's background. I know I should use CSS and set the z-index, but do not know how to do it in this case.
JS:
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var item1 = new Image();
item1.src = "images/sheep.png";
item1.addEventListener("load", function() { canvas.drawImage(item1,20,300)}, false);
var item2 = new Image();
item2.src = "images/tshirt.png";
item2.addEventListener("load", function() { canvas.drawImage(item2,300,300)}, false);
var background = new Image();
background.src = "images/background.png";
background.addEventListener("load", function() { canvas.drawImage(background,0,0,1024,768)}, false);
}
HTML:
<canvas id="canvas" width="1024" height="768">
The Canvas element is not designed to address layers within the element, you'll need to approach your problem using multiple canvas elements instead.
Here's a good article to assist you with the approach
If you're wanting to display multiple images on the same layer (canvas) then to order the images just draw them to the screen in the order you want them to display. The first drawn images will be at the bottom with each draw drawing on top.
If you want to treat layers as individual canvases, you can use css to set the z-index, or use Javascript like so:
canvas.style.zIndex = 99;