Posts

Showing posts with the label canvas

Mapped color transformation on cors tainted image

Image
Clash Royale CLAN TAG #URR8PPP Mapped color transformation on cors tainted image I need to transform colors in an image obtained from an s3 server which disallows crossOrigin. This is the functionality I need: const img = new Image(); img.src = src; ctx.drawImage(img, 0, 0); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const colors = [25,50,100,255]; const data = imageData.data; for (let i = 0; i < data.length; i += 4) { if(data[i] == 1){data[i] = colors[1]} if(data[i] == 2){data[i] = colors[2]} if(data[i] == 3){data[i] = colors[3]} } but got tainted by crossOrigin error: I know I can not use getImageData in this case. I don't want to read the image data. getImageData But maybe complete my task through some other webGL / canvas operation? Rendering on a server or proxying is not possible. Possible duplicate of How to fix getImageData() error The canvas has been tainted by cross-origin data? ...

chessboard canvas , loop and get some checkers as a circles in JS canvas

Image
Clash Royale CLAN TAG #URR8PPP chessboard canvas , loop and get some checkers as a circles in JS canvas I am struggling how to create multiple checkers on the checkerboard I have this JS code so far: <script> $(document).ready(function() { var gColor = "black"; var c = $("#myCanvas")[0]; var ctx = c.getContext("2d"); ctx.lineWidth = 2; ctx.strokeStyle = "black"; //set the color, gradient, or pattern for stroke drawBoard(); $("#color").click(function () { gColor = $("#color").val(); if (gColor > "") drawBoard(); }); function drawBoard() { var x, y, step = 60, step2 = 120; ctx.rect(0,0,480,480); ctx.stroke(); ctx.save(); for (var k=0; k<2; k++) { step2 -= step; ctx.translate(0, step*k); console.log("translate:("+0+","+step*k+")"...

Can't make square on canvas move, and now the square won't draw either

Image
Clash Royale CLAN TAG #URR8PPP Can't make square on canvas move, and now the square won't draw either I am trying to make an already drawn square move with the WASD keys. I wasn't sure how to do this, so I looked up some code, and after about 2 hours came up with my own non-working code. It wasn't working, but at least it was drawing my square... Or was. Now it isn't, and I have no clue why, here's my JavaScript: function initCanvas(){ var ctx = document.getElementById('my_canvas').getContext('2d'); ctx.addEventListener("keydown", move, true); function move(event){ //W if(event.keyCode == 87){ y = y + 20; } //A else if(event.keyCode == 65){ x = x - 20; } //S else if(event.keyCode == 83){ y = y + 20; } //D else if(event.keyCode == 68...

Android: ScrollView does't clean background when scrolling

Image
Clash Royale CLAN TAG #URR8PPP Android: ScrollView does't clean background when scrolling I have very strange problem as you can see pictures below: Top picture is captured before scrolling and bottom after scrolling. Android doesn't clear the background to erase the starting view. I can fix this if I accept black background (fix can be done by activating the commented code android:background="#111100"> in fragment.xml), but I won't do it. fragment_paavalikko.xml: <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_height="fill_parent" android:layout_width="fill_parent" android:scrollbars="vertical" android:id="@+id/vScroll"> <!-- android:background="#111100"> --> <HorizontalScrollView android:...