A blazor library that makes it easier to write to the canvas when coding using blazor.
I found it is not only useful to document and keep track of the final solution, but how one got there. For the first couple of days working on this project I had to learn a lot about canvases and still have a long way to go. To help others stumble less, and for me to be able to keep track of where I got information, here are the links I found useful:
-
WebGL Anti-Patterns - This link helped a ton. It explained some important concepts and how to best resize the canvas and when window or other changes in the page cause the canvas to resize. Thank you!
-
Resize Observer - Useful when learning to design an canvas that will resize appropriately when the window or elements change. See also the WebGL Anti-Patterns link above.
-
Blazor - Setting up a JSInterop library using TypeScript - Explains how to setup a typescript library when building out Blazor components when wanting to include javascript in the pipeline.
-
Resize HTML5 Canvas to Fit Window - Good article referencing some the articles above. Lots of good opinions.
-
Various Blazor Extensions with Javascript Dependencies and the Blazor Canvas Extension - Was very useful when building early prototypes. Then discovered I needed to fix a few architectural issues and thus the creation of this project.
-
Blazor Components build by Microsoft - The Web and WebJS folders contain blazor components.
-
Blazor WebAssembly 3.2.0 Preview 2 Release Notes - Mentions that BlazorLinkOnBuild in your project files needs to be changed to BlazorWebAssemblyEnableLinking
-
NPM won't install Dev Dependencies and Difference Between --save and --save-dev- Was useful when learning the solution pattern that includes using a *.JS project generate javascript libraries from typescript.
-
Compile Typescript Code with NPM - Useful if trying to learn about how webpack and npm work together to build typescript code.
-
Microsoft Blazor Documentation and Blazor Component Class Libraries- Just useful to have handy.
-
MelonJS - Open source game engine that was useful to reference
- Better Way to Add Dynamic Methods
- Creating Functions Dynamically with Javascript
- Javascript 'new Function(...)' syntax
I got asked a I learned over the last year it is important to make projects very small, as the amount of time available to work on projects truly dictates whether a project can be finished or not - and finishing a project is probably the number one thing to be able to do - else the work one does can be chaulked up to just being a technical exercise / a game.
The namespace starts with Evo. This is important for two reasons. One, when using other packages that use Blazor as a parent namespace, it is hard without using the global namespace to fix namespace conflict compile time errors. Second, it specifies from which organization this came from, which is again helps limit namespace conflicts.
Resizing the canvas appropriately and efficiently is not as straight forward as it seems, especially for developers who are not experts in HTML5 graphics. Thus, it was important to research and identify solutions others were using. It was found that others struggle with the same issues and that there were a number of good articles discussing how to best resize the canvas as window and controls within the page changed size. Those articles are listed immediatley below in the references section specific to this topic.
The first approach attempted was to check to see if the canvas needed to be resized each time it was drawn to the screen. Upfront it was known this was going to be a slow and inefficient approach, as the gut said go css or something like that, but that required research and the goal was to just get the damn thing working first. Well, it worked to some degree -- definalty killed performance though.
It was found out while using this appraoch that resizing the canvas clears the canavas - and that this fact surprises many. To optimize drawing operations, ideally only the porition of the canvas that needs to be redrawn should be; thus resizing needs to be removed from the rendering pipeline unless it is needed.
Frustrated, it was time to do some more research and identity approaches working for others. Eventually, jackpot was hit: WebGL Anti-Patterns. Looking at the first resize example, it shows the canvas is able to be resized by
The current BECanvas takes in two numbers for its width and height. Instead, I want the width and height to be set using css by specifying the width should be 100% the view ports and
canvas {
display: block;
width: 100vw;
height: 100vh;
}
Note, 'vw' and 'vh' suffixes stand for viewport width and viewport height, respectively.
The difference between these and using width being set to 100% is that while width: 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin. But if the style of the body is set to margin: 0; using 100vw should behave the same as setting width: 100%.
The first objective of this project is to figure out how to draw a grid to the HTML5 canvas and for the grid to resize.
Example 01 - Minimal Canvas Resizing without Scrollbars without using overflow: none;