I am trying to put up a logo on the top left corner of the graph and the below code is working fine, but what i wanted to know is is their any direct way by which i can make either height or width auto like we do in CSS?
function (chart) {
chart.renderer.image("http://i.imgur.com/mX5qRdP.png", 5,5, 30, 30).add();
}
I know i can do it by calculating height and width this way..
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';
But is their any more sophisticated way?
Highcharts is an SVG librarie, and the SVG 1.1 specification requires the width and height attributes for the <image> element.
See the documentation to see the attributes definitions.
What i wanted to know is their any direct way by which i can make either height or width auto like we do in CSS?
Actually, I don't think there is a way to have the automatic size like css because SVG needs a number for the attributes width and height of the <image> element.
Related
I'm struggling pretty hard with the documentation on the HTML2Canvas script. Specifically the options located here. I've figured out the syntax somewhat by using objects like this: html2canvas(element, {option: value}); but I have no idea what actual values the script is expecting.
My specific goal with this is to have a div that shows on my site that's roughly 1000px x 500px but saves an image double that size. (I want to save a 1920 x 1080 image, but I want the customizable div to fit comfortably on the screen while it's built.)
I'm guessing I need to use a combination of the width, height, scale, windowWidth, and windowHeight options, but I can only figure out the value syntax for width and height. Is anyone out there familiar with this script that can point me in the right direction?
Here is an example from my own website - I grab the contents of a div on the page, then render it to canvas like this:
var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
onrendered: function(canvas) {
var canvas_image = canvas.toDataURL("image/png"), // change output image type here
img = new Image(); // create a new blank image
img.src = canvas_image; // set the canvas_image as the new image's source
img.width = el.offsetWidth; // make the image the same width and height as the target container
img.height = el.offsetHeight;
img.onload = function () {
// do stuff
});
},
width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
height: <set your height e.g. '500px'>
});
For my purposes, the key property is the onrendered callback, which allows you to call a function after render and store the "on the fly" generated canvas in an image.
I've got a zoom button in my application which scales the children of a container using scaleX on each child.
But this makes the content extend beyond the canvas width. So I would need to additionally change the canvas width, but that seems to generally scale the canvas and the content - if I use...
$('canvas').width($('canvas').width() * 2);
...which I don't want. I basically just want to set a new width.
Any advice for this?
Thanks in advance.
The JQuery width method sets the width using CSS, which will stretch the canvas instead of setting its pixel dimensions. From the docs:
Set the CSS width of each element in the set of matched elements.
Instead you can access the canvas element and set it directly, or use the attr method.
// Direct
var elem = $("canvas").get(0);
elem.width = someValue;
elem.height = someOtherValue;
// Or using attr
$("canvas").attr("width", someValue);
Hope that helps!
I'm working on a sketchpad application using html canvas and javascript (trying to stay away from jQuery). The canvas needs to be responsive and I've found several methods to do so, but each one stretches out the canvas and makes the sketchpad unusable. It's hard to explain without seeing the problem. Here's the CodePen. Try drawing inside the canvas and you'll see what I'm talking about. The current method I'm using to resize the canvas incorporates offsetWidth and offsetHeight like so:
var sketchpadContainer = [
document.getElementById('container').offsetWidth,
document.getElementById('container').offsetHeight]
var canvas = document.getElementById('sketchpad');
canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";
Is there a way to make the canvas responsive while at the same time keeping the dimensions of the sketch intact?
The CSS width and height properties are NOT the same as the width and height attributes on a Canvas element.
If you absolutely need to use css to set width/height, keep a scale factor of your default canvas size, then multiple the target x and y positions of your mouse position by the inverse of the x/y scale factors (or just divide the target position by them).
Using css to resize your canvas is a bit too hacky imo (and will leave your lines blurry), I highly recommend you instead simlpy change with width/height attributes of your canvas and use CanvasRenderingContext2D.scale() to change the size of your lines (A scale factor will still need to be used to calculate your true mouse pos, however)
Simply change
canvas.style.height = sketchpadContainer[1] + "px";
canvas.style.width = sketchpadContainer[0] + "px";
to
canvas.height = sketchpadContainer[1];
canvas.width = sketchpadContainer[0];
Apply CanvasRenderingContext2D.scale() when you first get your context, and then do as I mentioned above. (ctx.lineTo(x,y); -> ctx.lineTo(x/scaleFactorX,y/scaleFactorY); & lastX=x; -> lastX=x/scaleFactorX;)
I.E See HERE
I have the following cropper app:
var canvas = $('#selector')[0]
//works
**canvas.width=image.width
canvas.height=image.height**
//doesn't work
**//$(canvas).width($(image).width())
//$(canvas).height($(image).height())**
//both seem to do the exact same thing
$('#selector').css('left','30px')
var ctx = $('#selector')[0].getContext("2d");
ctx.fillStyle="rgba(210,220,255,0.6)";
var cropinit=false;
//the cropped section will not be resizeable after the user finishes, but the user can create a new cropped section
canvas.addEventListener("mousedown", function setP1(event) {
//allows you to find the height and width by imagining a rectangle around it
//get bounding selector parameters
var selector_position = $('#selector').position()
xOff=selector_position.left
yOff=selector_position.top
console.log(xOff)
console.log(yOff)
p1=[event.clientX-xOff, event.clientY-yOff];
ctx.fillRect(80,54,40,40)
console.log(p1)
cropinit=true;
});
//so that if the user releases the mouse after it leaves the canvas, the crop completes
canvas.addEventListener("mouseleave", function() {
cropinit=false;
});
canvas.addEventListener("mousemove", function drawBox(event) {
if (cropinit) {
p2=[event.clientX-xOff, event.clientY-yOff]
setBox();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(corner[0],corner[1],boxW,boxH);
//console.log(p2)
//console.log(corner[0]+" "+corner[1]+" "+boxW+" "+boxH);
}
});
canvas.addEventListener("mouseup", function finishBox(event) {
p2=[event.clientX-xOff, event.clientY-yOff];
setBox();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(corner[0],corner[1],boxW,boxH);
cropinit=false;
});
The code works when I use the normal JavaScript code for setting the canvas width and height in **. However, when I use jQuery to set the width and height in the ** with comments. The rectangle is not drawn at the start and ending point of the user's mouse. The jQuery and normal JS version seem to produce the same canvas width and height, yet the rectangle is drawn in different places. They seem to do the exact same thing. What is the difference?
JavaScript element.width and jQuery width() are not equivalent.
element.width changes HTML attribute.
element.style.width changes CSS style value.
jQuery width() changes CSS style value, and is equivalent to the previous one.
Talking about canvas, its width and height attributes define an actual drawing size. At the same time, width and height CSS properties control the scale of image.
Note further that the height and width are the logical canvas dimensions used for drawing and are different from the style.height and style.width CSS attributes. If you don't set the CSS attributes, the intrinsic size of the canvas will be used as its display size; if you do set the CSS attributes, and they differ from the canvas dimensions, your content will be scaled in the browser.
There is a good Stackoverflow article, explaining the meaning of width and height of canvas with examples.
jQuery width() result
So, as I said, jQuery width() function changes the inline style of an object.
$("canvas").width(500).height(400);
document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>
element.width result
However, every item in this jQuery array is a DOM element:
var canvas = $("#selector")[0]; // HTML element object
canvas.width = 500; // changing the HTML element object's properties
When you change height and width properties of canvas, it actually changes its attributes:
document.getElementsByTagName("canvas")[0].width = 500;
document.getElementsByTagName("canvas")[0].height = 400;
document.body.innerText = document.getElementsByTagName("canvas")[0].outerHTML;
<canvas></canvas>
Conclusion
So, in case of canvas, you need to change HTML attributes, but not style rules, and jQuery width() and height() functions are just not suitable for this.
At the same time, you can use jQuery in the following way:
$("canvas").prop({"height": 500, "width": 400});
However, it will do absolutely the same as your pure JS code.
What I'd like to do is create a 15 by 15 pixel sized canvas with jQuery and I am looking for an elegant way to do it.
I currently create a canvas with jQuery like this:
var canvasNode = $('<canvas />', {
style:'display:block',
width:15,
});
// canvasNode[0].width=15;
canvasNode[0].height=15;
An oddity is that the width:15 in that has no effect while the currently commented out line below does what I'd like to do. I also tried style:'display:block;width:15px;' but while that displays the canvas at 15px width the canvas itself stays at its large default size so its just being scaled so that's not what I seek.
In case you are really worried about performance, this is the fastest way (untested, but I'm sure it is):
var canvas = document.createElement("canvas");
canvas.width = 15;
canvas.height = 15;
That is, no jQuery at all.
Note that sending in an object with a width property will set the css width to 15px (basically just scaling the canvas), the canvas will still be created with the default number of pixels in width if no width attribute is specified, which is usually 300 pixels.
Just set the width and height attributes:
$('<canvas />', {
style:'display:block'
}).attr('width', 15).attr('height', 15);