Gtjkyu

Timeline Video in HorizontalScrollView [closed] I've been intrigued for a few days, because I'd like to make an example code like the following images, but I do not know where to start. It is a video, from which images have been extracted and have been added to a horizontal scroll view. The white vertical bar marks a position and while pressing on the lower button a yellow rectangle is added until the button is released. I would like to know if you can help me with this code for Android. Fixed white vertical bar, only horizontal scrollview moves Yellow rectangle painted while the button is pressed Thank you very much and greetings Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question. Stack Ove...

Canvas drawImage scaling I'm trying to scale an image proportionately to the canvas. I'm able to scale it with fixed width and height as so: context.drawImage(imageObj, 0, 0, 100, 100) But I only want to resize the width and have the height resize proportionately. Something like the following: context.drawImage(imageObj, 0, 0, 100, auto) I've looked everywhere I can think of and haven't seen if this is possible. 3 Answers 3 context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width) solution of @TechMaze is quite good. here is the code after some correctness and introduction of image.onload event. image.onload is too much essential in order to abstain from any kind of distortion. function draw_canvas_image() { var canvas = document.getElementById("image-holder-canvas"); var context = canvas.getContext("2d"); var imageObj = document.getElementB...

Change color Image in Canvas I want to change color a Image in canvas this is the Image You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code : var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), image = document.getElementById("testImage"); canvas.height = canvas.width = 100; ctx.fillStyle = 'red'; ctx.fillRect(10,10,20,10); ctx.drawImage(image,0,0); var imgd = ctx.getImageData(0, 0, 45, 45), pix = imgd.data; for (var i = 0, n = pix.length; i <n; i += 4) { if(pix[i+3]==0) {continue;} pix.length[i]=r|pix.length[i]; pix.length[i+1]=g|pix.length[i+1]; pix.length[i+2]=b|pix.length[i+2]; pix[i + 3] = 255; } ctx.putImageData(imgd, 0, 0); 1 Answer 1 To mix manually you would have to...

Using a line to divide a canvas into two new canvases I'm looking to allow users to slice an existing canvas into two canvases in whatever direction they would like. I know how to allow the user to draw a line and I also know how to copy the image data of one canvas onto two new ones, but how can I copy only the relevant color data on either side of the user-drawn line to its respective canvas? For example, in the following demo I'd like the canvas to be "cut" where the white line is: const canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); const red = "rgb(104, 0, 0)", lb = "rgb(126, 139, 185)", db = "rgb(20, 64, 87)"; var width, height, centerX, centerY, smallerDimen; var canvasData, inCoords; function sizeCanvas() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; centerX = width / 2; centerY = height / 2; smallerDim...

how can I detect collision in a 2D tile game map I made this basic game where I drew a map and a player, the player can move anywhere but how can I make so that it wont move when its on the tile[1] in the map? also when I try to check if the player.x is greater than 50 it could go left it works but than if I click 2 keys at once it goes through const context = document.querySelector("canvas").getContext("2d"); var rgb = 'rgb(' + Math.random()*256 + ',' + Math.random()*256 + ',' + Math.random()*256 + ','+Math.random() + ')'; document.onload = Loop(); var width = 1500; var height = 800; function Loop(){ var width = 1500; var height = 800; context.canvas.height = height; context.canvas.width = width; this.interval = setInterval(Update, 1000/100); } const Player = function(x, y, w, h, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.speedY = 0; this.speedX = 0; this.Draw = function(){ context.f...