JCanvas | canvas programing | Canvas library

Im using jCanvas to make flyer editor with jQuery : https://projects.calebevans.me/jcanvas/

I am making a pong game, and I am trying to add scores to it. It is not adding scores, no matter what I do. There is nothing in console. I couldn't find anything on google for it. Since the source code is very long, I will just paste the link. Here is the Html & Js:

This is within the Bismon project (a GPLv3+ software funded by H2020 European projects), git commit 0e9a8eccc2976f. This draft report describes the software. This question gives more context and motivations. It is about the (hand-written) webroot/jscript/bismon-hwroot.js file, used in some HTML page whose code is generated by Bismon (a specialized web server above libonion).

I added some CSS class for span, e.g. span.bmcl_evalprompt (e.g. in my file first-theme.css).

How do I code the JavaScript to add a text piece in a canvas (preferably using jcanvas with jquery) having the same style (same font, color, etc...) as that span.bmcl_evalprompt ? Do I need to create such a span element in my DOM? Is that even simply possible?

I only care about a recent Firefox (68 at least) on Linux. JQuery is 3.4. I am also using Jquery UI 1.12.1

The idea I had in my mind was to create one single element with coordinates far away from the browser viewport (or X11 window), e.g. at x= -10000 and y= -10000 (in pixels), then add that single badly positioned element into the document DOM, then use traditional Jquery techniques to get the font family, font size, and element size. But is there any better way? Or some Jquery compatible library doing that?

Just want to say, I don't use CSS, but on small size canvas quality of circle very poor.

Example: jcanvas https://jsfiddle.net/tkdn2rv6/25/

For example, everything is fine on the konvajs: konva https://jsfiddle.net/qup9s57y/23/

Why is the image so blurry?

I would like to use jcanvas, since it is smaller in size and use jQuery.

Hi everyone I have a question about woocommerce and custom metadata.

In my simple product page I had a 2D canvas made with jcanvas. All work well I can adjust height and width based on the product data and modify them.

Then before adding to cart I export an image base64 from my canvas and add it to the cart item because it's a thechnical data. When I go to cart page. I have an error 414. Request uri too long. So I try to generate blob image which work on single product page but not on cart item.

Also try to did that with a base64 image. It works but in my cart item img src data: is automatically removed and don't know why ...

Strangely it remove in my img src the blob: part ...

So my question is how I can send my png canvas image to a cart item and attach to it to display in a thumbnail ?

Thanks

Pierre

I am calling a function which contain all draw method and then i am calling another function with all animate method and issue is that,

when i am calling second function first time it works perfectly but second animation time is not working

I am bumped into another problem connected with KnockoutJS and jCanvas. My model and ViewModel:

I have written a custom UI extension by following the procedure that cystoscape.js recommends. I am using jcanvas library to draw shapes on this ui extension. Everything works great except the click events on these shapes (jcanvas library provides events to bind on the shapes drawn)are not working. Click on these shapes makes only cytoscape core click. jcanvas events are not fired because I think cytoscape eats all the events. Could someone please help me to how to listen to events on the canvas which are overlayed using ui extension?

Thanks Prakash

After Dynamically resizing a canvas using javascript points plotted on it no longer line up with where they are placed, and also arcs are getting stretched from how they should be rendered.

The below runnable example demonstrates the issue, because what should be a point where you click the cursor turns into a large miss-shapen oval which is in the wrong place.