canvas-draw | 使用canvas手写签名或绘图 -- 支持pc和mobile端、支持横屏 | Canvas library

I'm making a simple paint application as homework employing the state design pattern. And I took a code sample from a website that explains free-drawing on canvas via different tools.

And the section explaining the point-based drawing is seen as below:

Here is the codesandbox link

And here is the code

I am creating a Canvas that I want to ensure it is easily navigated on any platform (desktop, mobile, etc). I decided on using a responsive canvas to accomplish this. Before I had the canvas at 800x800 and it looked fine (aside from not being responsive). The canvas includes lines and image files. I'm also using Bootstrap.

I took out the width/height definitions and began testing how it look when responsive. It did act responsive. However, everything looks enlarged and blurry, including the images and the lines. Even if I size down my screen. Part of the canvas is also off the screen.

I understand responsive means it'll scale. But why when the screen is even far below 800x800 it looks blurry, how can I correct that?

Relevant part of the index file:

I am working on a quiz tool where one of the questions is of image type.

Imagine you are creating the test for your students and you upload an image of a car. You then mark two doors of the car and your question is - Click on one of the doors of the car below. The student, when on this question, will see the same image without any markings/annotations. If the student clicks on the door he/she gets the point, not otherwise. Note: The car doors are random shapes and can be a polygon and preferably can be drawn using a brush tool, sort of.

Here are some thoughts I have but is there a better way or a library that suits this?:

The UI is built in React, the data format can be anything as long as it works.

1. A library that could draw and capture Polygons on an image like this or this. I can then run a "point lies inside polygon" algorithm like this. But that also sounds like overkill. (And I am not sure if they distinguish between multiple polygons cleanly).

2. A library that does both the tasks of option 1.

3. Anything else better?

Sorry if this is asked before, but my question is more React focused and I couldn't find an answer.

I want to draw an image in WebGL, but downscaled. When I don't scale it, then the image has a good quality, but if I scale it down then it has poor quality.

I read about 'Handling High DPI (Retina) displays in WebGL' from here: http://www.khronos.org/webgl/wiki/HandlingHighDPI and I tryed to do the same. My code in WebGL is:

I'm drawing an image onto a canvas using drawImage. It's a PNG that is surrounded by transparent pixels, like this:

How can I detect a drawing move path in the transparent part of that image on the canvas? I want to detect if a user draws in a transparent part.

I am trying this tutorial and I did as showing in the tutorial.

I'm trying to create a component to sign with HTML 5 and canvas in Angular 8, I need the component to recognize touch events as well as mouse events.

I've been taking inspiration from this page to create the component, since it's something very similar to what I need:

https://kernhanda.github.io/tutorial-typescript-canvas-drawing/

But I haven't been able to make the component work, I don't know why, I think the error may be due to the fact that I do not have the same configuration of the tsconfig.json file as the tutorial.

This is the configuration of the tsconfig.json file from the tutorial

And this is mine:

So I've come to a point where I don't know how to move forward, please if anyone knows exactly what I'm doing wrong or if there's a simpler way to create the component for the signature that recognizes touch events I'd be very grateful if you would tell me.

EDIT: I share a stackblitz with the code:

https://stackblitz.com/edit/angular-szrn6z

EDIT: The code works on Stackblitz but not in my project, this could be because of the tsconfig.json file configuration?

I'm about to create a GUI for my Raspi-Project. There is Nodejs running on the Raspi3 which runs a NodeJs-Server and a then it gets requested with Chromium in kiosk-mode.

One page of this GUI needs to visualize the states of 48x potentiometers, 12x buttons, 8x faders. The NodeJs-Server sends data (which was modified by user) via websocket to the client, which redraws the whole canvas. Works fine so far for a few elements:

works fine but with a slight delay if you look closer

Now the problem is, that whith the growing number of elements that need to be drawn, the performance drops down to unacceptable dalay-times.

works, but with a way too big dalay, as more elements are drawn

and those are not even the half of stuff that needs to be drawn.

I am confused now, because I read about how fast canvas is, before I decided to go that way, and if I deactivate all canvas-drawings and simply console.log() the data that comes in via websocket, it is fast like in realtime.

so what am I doning wrong? maybe there it would be better not to draw the whole canvas on every value-change but animate the canvas? maybe someone has experience on this?

Here is the code.. when you look into assets/js/menu.class.js, this is the file which generates the canvas. the function createControllerGUI(options) is called every via websocket, every time a value changes.

I tried to draw a line with a certain angle in a html canvas. Unfortunately, the line does not appear at the desired angle. Can someone tell me what I am doing wrong?

html code: