Drawing image on canvas

[MacNala]

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.

 

[mikesoers]

A dedicated software development company can take care of all software requirements from a strategic business needs perspective. This means that they have a clear vision of the kind of software requirements a business needs so that they can design a custom software development solution to fit the business needs. For instance, if a business needs to develop an e-commerce platform then it would require application programming as well as database integration which a dedicated software development company can incorporate into the overall design. Agile Software Development Methodology by https://syndicode.com/mobile-application-development/ is based on the principle that software engineering can be applied to solve problems by using simple, step-wise approaches. The software development team will develop software solutions on the basis of a " Feature backlog", where each feature will be assigned a time-frame to complete and deliverables for each feature. The software development company will make use of a variety of tools and techniques to deliver software solutions within the specified time-frame. One of the key benefits of using Agile technology is that it enables the developers and software engineers to focus more on developing the functionality rather than on solving technical problems.

 

[MacNala]

Very interesting article! Thanks! I also have the same case. Thanks for this solution!

I Have found the solution to my problem. By invoking the function in the onload={function name} way it works now I am trying to tidy up the many different tests I have done to get to this point and implement the JS from a common library.