What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Drawing image on canvas


New member
I have on my website (https://alancameron.net/solar choose Aggregate) the display of solar panel statistics. I am trying to understand the methods of drawing an image on an HTML CANVAS using JavaScript.

The problem, that I see, is that the image generated in an Excel spreadsheet is getting too large to view easily. Currently you get two graphs, one above the other. I would like to split this into multiple separate pages and on each page show one of the statistic graphs, in a format that is viewable by users who could be using different devices with different screen properties, height/width.
A single graph image is 1359 x 889 pixels.
I have seen somewhere a method of finding the size of the screen in use. I plan to define an HTML Canvas with suitable dimensions so that it fills the screen and then draw the image of the graph, scaling it suit the canvas size. My question is how do you do it?

I have gone through the w3schools tutorial and am trying their code in a VM but it does not all work for me and I can only use trial and error to find the reason why not.

The W3Schools tutorials are good in a general way but not for my specific requirements. The section called "Draw Image" in the HTML Canvas tutorial I can get to work. It requires the user to click a button to 'Try it'. What I need is how to have the JavaScript function 'myCanvas' to be executed after the graph image has been loaded, but I cannot see how.

I can copy the image to here but it is rather large and I don't want to clog up the forum.

Any suggestions will be gratefully received.