Liveworksheets is a website for students and teachers where teachers can upload files with questions then after uploading the file the teacher answers these questions and then send this file to students -without answers of course- to answer it. There are many ways that can teacher use to solve these questions but the way that matters to me is the
Tag: canvas
Javascript, how can I get image width and height from a blob?
So this is my code snippet (unnecessary code lines are removed): I want to get the uploaded original image’s width and height so I can resize it. I can’t do it from imageFile as it returns undefined and can’t get it from the img variable as it originally depends on my css (in css the <img> tag is in a
Get canvas pixel position from mouse coordinates
I have a 16×16 canvas that is scaled with CSS (width:90%; height: auto;) and I’m attempting to convert mouse coordinates on the canvas to one of the 16×16 pixels. I’m taking it from an onmousemove event, and while I can get the raw screen coordinates, I need to get where it lies on the canvas. Answer Try this: So you
How to implement rolling a ball on a sphere in terms of matrices?
Target: It is necessary to create two spheres, one of which can be rolled over the surface of the other with the mouse, and implement a camera that can be moved around these balls using the keyboard. Implementation: I started a matrix that stores the current state of the rotation of the rolling ball. When the user drags, I get
How to create a common shadow for multiple strokes in a single canvas?
I’m trying to draw multiple strokes on a canvas and I’d like them to have a common shadow. Currently the cast shadows on one another which is not what I want. Ideal result What I’ve tried Creating shadow using ctx.shadowColor jsfiddle Creating shadow using ctx.filter jsfiddle Creating shadow using css box-shadow on the canvas — draws shadow on the whole
Fabric.js create dynamic image mask
I want to mask the original image using alpha mask image. I can do alpha masking on image with the following code. But I want to be able to edit the mask with the brush, how can I do that? In theory if I paint the mask white it should be opaque, if I paint it black it should be
create image in React from backend dataURL
I’m trying to get a snapshot of HTML canvas like so: which seems to be working, and connected properly to the database. But I can’t figure out how to use the dataURL to create an image component on the React frontend I’m able to fetch them from the backend just fine and log the dataURL. I guess I’m just not
Circular movement when user input left/right arrow
I am trying to achieve left/right circular movement inside my main circle. I have class Circle and Ball. Circle is responsible for drawing a “circle” where I am placing my Ball, that is moving inside. For now I am inputing left right arrow press and i do want my ball to change direction based on arrow press. I was playing
context.putImageData() Not working in React
Im trying to create a drawing application in react, its working for the most part. But when i try add an undo button it doesnt work. I try make the undo button with this finishDrawing() function, where i use getImageData and store it in an array called restore_array then when a Undo button is clicked i try to reload this
Draw isocele triangle according to angle in javascript canvas
I would like to know how can I draw an isocele triangle in canvas, if I know the first angle, and the lengths of the two equal side. Shema (known lengths are in red) And second question, is it possible to curve the top side like that : Shema Answer