Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

ArjhanToteck

Member
  • Content Count

    12
  • Joined

  • Last visited

Awards


This user doesn't have any awards

About ArjhanToteck

  • Title
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I tried using that site, it didn't work. Maybe I did something wrong?
  2. Basically, I'm writing a program that allows a user to create and export maps. I can't get JavaScript to export the map (a canvas) because it is "tainted." I tried looking this up and tried to fix the error multiple times in multiple ways, but nothing worked. Here is some of the code for exporting in case it helps: <img id="exportImage" crossorigin="Anonymous"> <script> function exportMap(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var img = document.getElementById("exportImage") // save canvas image as data url (png format by default) img.crossorigin = "Anonymous"; var dataURL = canvas.toDataURL(); console.log(dataURL) document.getElementById("exportImage").src = dataURL; } </script> Thanks in advance!
  3. So I worked with two canvases the way you suggested, thank you, and wrote a function to erase the rectangles on the second canvas. But I ran into a new problem that is probably a simple fix; the program does erase and draw properly, but the full image is no longer displayed, only a small piece of the uploaded image is displayed. Here is the code, in case the problem is just some kind of syntax error I didn't notice: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <div style="position: relative;"> <canvas id="imageCanvas" width="100" height="100" style="position: absolute; left: 0; top: 50; z-index: 0;"></canvas> <canvas id="drawingCanvas" width="100" height="100" style="position: absolute; left: 0; top: 50; z-index: 1;"></canvas> </div> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var ii = document.getElementById("drawingCanvas"); ii.style.display = "none"; var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var ii = document.getElementById("drawingCanvas"); ii.style.display = "block"; var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var ii = document.getElementById("drawingCanvas"); ii.style.display = "none"; var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var canvas = document.getElementById('imageCanvas'); var width1 = canvas.width; var height1 = canvas.height; drawingCanvas.width = width1; // in pixels drawingCanvas.height = height1; // in pixels var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // Draws on Map // ___________________________________________ var isMouseDown = false; var size = document.getElementById("size").value; size = parseInt(size, 10); draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; var c = document.getElementById("drawingCanvas"); var ctx = c.getContext("2d"); drawingCanvas.onmousedown = function(){ isMouseDown = true }; drawingCanvas.onmouseup = function(){ isMouseDown = false }; document.onmousedown = function() { if(isMouseDown) { if(coverOrUncover === "cover"){ fill(0, 0, 0); noStroke(); rect(mouseX - (size/2), mouseY - (size/2), size, size); } else if(coverOrUncover === "uncover"){ ctx.clearRect(mouseX - (size/2), mouseY - (size/2), size, size); } } } document.onmousemove = function() { if(isMouseDown) { if(coverOrUncover === "cover"){ fill(0, 0, 0); noStroke(); rect(mouseX - (size/2), mouseY - (size/2), size, size); } else if(coverOrUncover === "uncover"){ ctx.clearRect(mouseX - (size/2), mouseY - (size/2), size, size); } } }; }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("drawingCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>
  4. Maybe I can place a canvas on top of another, one with the image and the other with the user drawing and erasing, but I don't know how.
  5. I am trying to make a program where the user uploads a map and can cover it and uncover it. I can manage to write a code to allow the user to cover the map, but not to uncover the map. I am trying to use CSS sprites that take a piece of the uploaded image and makes that what the user paints. Since the image is uploads, it does not have a url, so using CSS sprites does not work. Is there a way to use CSS sprites, or an easier way? Note: The image is in an HTML canvas. Here is the program, if showing it helps: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <canvas id="imageCanvas"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // ProgramCodeGoesHere var size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); fill(0, 0, 0); noStroke(); rect(mouseX, mouseY, size, size); }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("imageCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>
  6. Here's a good challenge; help me with this.
  7. I'm the friend Duckster was talking about. What you should do is assign a blank variable to the textbox where the characters are being typed. Then you can make another variable and assign the length of the first variable to the second variable. For example, let text let characters Then you should add a variable called var1 and then make a loop that sets the value of characters to the length of text as long as var1 = 0, and within it an if statement that tests the amount of characters and alerts the user if there are more than 750 characters. var var1 = 0 while(chracters < 751){ characters = text.length if(characters === 750|| characters > 750){ overMax() } } function overMax(){ \\ add alert lines here. } Depending on what you're file or application is, you can add the alert in the \\add alert lines here spot. This might work as the alert function; function overMax(){ alert("You have 750 characters. You might want to save now to prevent losing some work in case of the program crashing.") }
×