Questions tagged [Canvas] (792)

There is JS script where there is an array of Image objects already loaded (the animation frames PNG format), and there is canvas. Also there is a function which clears the canvas (clearRect) and then using drawImage draws the next frame in the array. The problem is that if you take two (or more) canvas with frame animation...

how to move the triangle in the canvas by the values of top left

Do my view, the type of card, trying to make scale, but that the object in the center, remained in the center. It turns out adequately only if the scale of 1, and then the viewport went the wrong way. class MyView : View { constructor(ctx: Context) : super(ctx) constructor(ctx: Context, attrs: AttributeSet) : super(ctx,...

You can't build a graph using JS and Canvas. I can not understand algorithm of the connection lines with coordinates Y, have the values: 100, 10, 0. The problem is that you need the Y coordinates to reduce to the difference between the values fit on the chart was limited by the size of the graph, i.e. the graph could be sca...

As you can realize the gradient for CylinderBufferGeometry? Preferably not using shaders #D0D2ED - #FFFFF

Good evening, tell me how after cropping the photo on the front is a cropped photo in zip File to send to the server, that is here in this format Below is an example of cropping a photo on the front const reader = new FileReader() reader.onload = () => { const img = new Image() img.src = reader.result const canvas ...

Good day! There is a small example of a game where the player moves in the zone, but if he walks into a dead zone, then the page reloads. It is necessary that the player remained in the same coordinates, but did not go to the dead zone. window.onload = start_game; const game = document.getElementById("game"); const ctx = g...

Is there any function in canvas to draw a line at an angle desired length?

Why canvas does not accept dynamic src code var canvas = document.getElementById("myCanvas"), context = canvas.getContext("2d"); contextT = canvas.getContext("2d"); var img = new Image(); var imgflag_1 = new Image(); var imgflag_2 = new Image(); var imgflag_3 = new Image(); var imgflag_4 = new Image(); var imgUSER...

Studying the technology of ray marching and write a small project in web. When it comes to rendering full hd images, the page hangs for about 20 seconds and is a lot. How to increase the speed of rendering, and do like in other 3D engines for the web, where 1 frame takes a fraction of a second? If you need code, then it li...