My topic here is pretty straight forward for a project..
I saw lots of topics on the subject of resizing images into canvas... but what I'm trying to do here is the opposite.
I have a template image that isn't going to change unless it's a different screen size. However; I'd like to make it so the image in the form of a canvas fits inside the template image dimensions. I'd like to think of the template almost like a container, but since I will be using different images with different dimensions it's a little more complex.
I'm trying to make it so the image created inside the canvas element fits regardless of it's size fits proportionately inside the dimensions of the #tee element.
<body>
<div id="obj-container">
<canvas id="obj"></canvas>
<img id="tee" src="https://doc-04-6s-docs.googleusercontent.com/docs/securesc/qhq5e6giuhl9ifpegip5ens14q2k3js8/8krn1u04pvhor8f561eg93ipbn8hjh2e/1569607200000/16313464075852650790/11150445017567734732/0B3ubyt3iIvkaUlpHVEpDTGhjQzg?e=view"></img></div>
Here is an actual example on Codepen https://codepen.io/andrew-squire/pen/JjPqPey
Related
I am trying to get an image (for instance png) out of a chart drawn with chart.js.
The idea is to send this image to the backend to then include it in a larger report.
Generating an image out of the canvas of the chart is quite easy - I can do something like
var canvas = document.getElementById('canvasIwantToRenderForTheBackend');
canvas.toDataURL("image/png");
// or
canvas.getImageData();
The problem I have is that this will make the chart-image look the way it looks in the moment when the user is creating the report.
What I need is to create a fixed size canvas, draw the chart in there and export that canvas to the image - basically I don't want the image to be squeezed just because the user made the browser window smaller and it looks squeezed in the browser (chartjs tries to make the chart look "nice" within the squeezed frame it gets). Also I don't want the canvas the user is seeing to get resized or do strange things.
p.s.: I tried making a copy of the canvas which I don't append to the DOM, resize that and then generate the image out of that - but that somehow is just an empty image.
Actually, I tried to just manipulate the width of the canvas in the browser-console and the chart disappears
p.p.s.: Note that I don't want to resize the image - I can do that, I want to resize the canvas where chartjs draws the chart because depending on the size of the canvas the chart looks different - I want the image which I get to be independent of what the user is seeing right now.
The solution I am using is to create my fixed size canvas in the DOM but I position it outside of the visible screen.
Basically I put the canvas I want to use to render an image out of it inside the following div
<div style="position: absolute; left: -2000px">
<canvas id="canvasIwantToRenderForTheBackend" <!-- here go all the attrs I want to use for this canvas--> ></canvas>
</div>
This way chartjs gets forced to actually render the chart into that canvas.
The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.
Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It's going to be dynamic so I don't want to resort to using separate images.
Here's a pic that illustrates what I mean:
Hopefully there's an answer out there!
You have a few options to achieve this effect.
The "correct" way would be to use canvas to draw the image: Skewing images individually using canvas
Another way would be to fake the effect using the CSS transform skew.
http://developerdrive.com/demo/skewing_elements/skewing_elements.html
You would do this inside an element with "overflow: hidden" to make it look like a background image.
It's not even clear to me what you want from the image you're linking too. Do you want it distorted or not? And is the distortion uniform?
I'm going to guess whatever you're doing can be approximated by drawing an ever decreasing set of (or maybe rectangles) clipped from the center of a some image and drawing them onto a "canvas" (think generic term not html5 term) given new coordinates for the center of each clipping. There may be a faster way to draw this than redrawing parts of the image multiple times, it's just how I visualize it possibly working.. at least maybe in some mathematical sense.
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I am experimenting with canvas as part of my HTML5 introduction. This constitutes as assignment work, but I am not asking for any help on the actual coursework at all.
I am trying to write a rendering engine, but having no luck because once the image is drawn on canvas it looks very distorted, and not at the right dimensions of the image itself.
I have made a animation engine that loads images into an array, and then iterates through them at a certain speed. This is not the problem, and I assume is not causing the issue as this was happening when I drawn an image to the canvas without the animation component.
I think this is natural behaviour for images to be scaled/skewed when the window is resized, so I conquered that by simply redrawing the whole thing once the window is resized.
The images I am using are isometric, and drawn at a pixel level. Would this cause the distortion? It seems setting the dimensions on the drawImage() function are not working are all. I am using JavaScript for the manipulation and rendering of the canvas.
I would normally try and work it out myself, but I do not have any time to ponder why because I have no idea why it is even scaling/skewing the image once it is drawn on the canvas. I cannot share the code for obvious reasons. I should also mention, the canvas's dimension is the total width of the viewport, as I am developing a game.
My question is: Has anyone encountered this and how would I correct it?
Thanks for your help.
Seems that you set dimensions of canvas with css.
Try defining them as html attributes. Example:
<canvas id="test" width="100" height="100">Fallback content</canvas>
Edit:
It will set width/height of canvas element to 100/100 pixels.
Yes, the problem was I was setting the canvas's dimensions with CSS. The canvas element is treated like an image, and I was actually scaling the canvas with CSS not resizing it. Thanks for the help. – Mark just now