Literally how to draw a line in Blazor? I have seen this project on GitHub and it is a wrapper of HTML canvas and I've also seen this question, and this article among others and they seem to make calls through JavaScript to draw on a canvas so it basically executes as plain JS code.
I wonder if there is another way to draw line and create animations like in Blazor that should have close to native performance.
Is there an alternative to HTML canvas and keep wrapping JS calls in order to create draw lines like animations, like something official that supports this kind of functionality?
No, there is no currently no alternative and nothing is build into Blazor for this.
Blazor uses web technologies to render the user interface.
Even if Blazor would offer a build-in way to draw stuff that would be nothing else than an opininated API over canvas or WebGL.
Nevertheless, I hope that the team will one day decide to create such an in build-in API for drawing on the canvas. Those drawing capabilities will make Blazor even more attractive for a lot of users. Take a look at the huge success of p5js and the amount of new programmers that p5js has brought to the javascript community.
I think the chance that Blazor team will take up such a task is pretty low, they probably hope the community will do it. However, the chances to get a great Windows Graphic Rendering Library from MS was pretty low as well and we got Shawn Hargreaves creating the awesome Win2D library. So let's keep the finger crossed!
A workarround from Janury 2023. No way from blazor, you must use JavaScript :_(
In the .razor file
<canvas id="myCanvas"></canvas>
#code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("TestCanvas", "myCanvas");
}
}
In TestCanvas.js file
function TestCanvas(id) {
let canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 20, 20);
}
Add a reference to the TestCanvas.js file in "_Layout.html"
<script src="~/js/TestCanvas.js"></script>
By draw, do you mean the user can create lines interactively? Or just that you want to programmatically add content to the screen. Because these are very different issues.
If it's the latter, then you should consider inline <svg>, which has 2 advantages: 1) svg lines aren't pixellated, so they can scale and always look great; 2) <svg> tags, being markup, can be added directly in Blazor.
EVEN IF I were drawing lines interactively, I'd choose svg over an HTML Canvas, tbh, unless I was trying to make an interface for SD or something.
Related
Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).
The site http://www.lahautesociete.com/ exhibits the use of a geometric background design whose vertices move in random directions.
I've inspected the DOM and they're making use of canvas to produce the pattern. I'd like to replicate this pattern, but the thing is, even though I have some decent canvas experience, I have no idea where to start on this one.
Is there some sort of mathematical formula that produces the triangular pattern? How would I select the individual vertices? If you can guide me in the right direction, please let me know, thanks!
This is pretty much the only code I could grab pertaining to the canvas design (unhelpful, I know):
<canvas width="1280" height="353" style="width: 1280px;height: 353px;"></canvas>
There's a minified JavaScript file that I unminified, but I've been unable to identify anything relating to canvas within it.
Update: Looks like the deminifier I used couldn't handle the gigantic JS file the site uses. On exploration, I discovered that the site makes use of Three.js
Update (Jan 21, 2016): After a lot of research, I've discovered that the name of the pattern I'm looking to code is called a Delhaunay Triangle. I've come across a few external resources that I look to examine and analyze:
http://christophermanning.org/projects/voronoi-diagram-with-force-directed-nodes-and-delaunay-links
http://codepen.io/blascone/pen/AoFCx
http://codepen.io/kenjiSpecial/pen/BGhrm
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.
I want to write some animation with html5 canvas element. I found that there are some js libraries that help to leverage canvas functionality. For example KineticJS, FabricJS. But I don't know which library to use.
What is pros and cons when using this libraries? Or may be you know even better implementation?
edit
I'm going to create something similar to static picture, but with piece оf animation. For example floating clouds on the sky, flower where you can tear off a petal and throw it. May be some animation with sun. This is general description, hope this helps.
There is Processing.js, which is a port of Processing for Java. Processing.js is ideal for 2d images.
Raphaël uses svg to draw images, which results in more compatibility.
For 3d there is Three.js, which uses both canvas and webgl.
There are a lot of different libraries around, you should first find out what you want to draw.
http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/
cgSceneGraph is a javascript animation framework providing a full animation engine with timelines, animation keys, ...
It also provides helper methods to easily add animations on every attribute of an element.
The example on the home page of the website is exactly what you talk about, so it should fit your need :)
For simple animations forget the canvas and use position: absolute div elements with background image that you can move around with CSS transform translate3d and scale3d.
I'd like to be able to write an application in HTML5 that is similar to the following.
HTML5 Canvas Animals on the Beach Game with KineticJS
The problem with that demo though is the mouse over event is only accurate to the rectangle surrounding the animal. Is there any way to do this with more accuracy, be it in KinectJS or otherwise?
There are generally two ways:
Using custom paths with each image as hitboxes (that you manually define) then using an is-point-in-path algorithm
Using a ghost-canvas (or whatever you like to call it) as I detailed in this old tutorial. Ignore the link to the new tutorial, the old one uses what you'd want.
The first method here is much faster but requires a lot more code and manual work. The second method is pixel-perfect but much slower. Still, if you don't have an enormous amount of objects it may suit your needs.