CODEWITHSUNDEEP
javascripthtmlcanvas
timakro
timakro

Reputation: 1841

problems with canvas

Here's my html document:

<html>
<head>

<meta charset="utf-8">
<title>Automapper Editor</title>

</head>
<body>

<nobr>

<script>
var img = new Image()
img.src = "grass_main_0.7.png"

for(var y=0; y < 16; y++) {
    for(var x=0; x < 16; x++) {
            var tilecanvas = document.createElement("canvas")
            var tilectx = tilecanvas.getContext("2d")
            tilecanvas.width = 64
            tilecanvas.height = 64
            tilecanvas.draggable = true
            tilectx.drawImage(img, x*64, y*64, 64, 64, 0, 0, 64, 64)
            document.body.appendChild(tilecanvas)
    }
    document.body.appendChild(document.createElement("br"))
}
</script>

</nobr>

</body>
</html>

I want to split an image with the size of 1024 pixel in 16 images with the size of 64 pixel. Then i want to draw them on canvas and write them to the document. This are my problems:

Upvotes: 0

Views: 243

Answers (2)

markE
markE

Reputation: 105015

As said by RienNeVaPlu͢s & Ken Fyrstenberg, make sure you give your image time to load with onload.

Here's a proof-of-concept allowing html drag-drop of a spliced image-canvases:

https://jsfiddle.net/m1erickson/g9nfuved/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
    body{ background-color: ivory; padding:10px; }
    canvas{border:1px solid red; margin-left:0px;}
    #dropzone{width:250px;height:50px;border:1px solid blue;}
</style>
<script>
$(function(){

    var $results=$('#results');

    var img=new Image();
    img.onload=start;
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";
    function start(){

        var w=img.width/4;
        var h=img.height;

        for(var x=0; x < 4; x++) {
                var tilecanvas = document.createElement("canvas");
                var tilectx = tilecanvas.getContext("2d");
                tilecanvas.width = w;
                tilecanvas.height = h;
                tilecanvas.draggable = true
                tilecanvas.id='canvas'+x;
                tilectx.drawImage(img, x*w,0,w,h, 0, 0, w, h)
                document.body.appendChild(tilecanvas)
                tilecanvas.addEventListener('dragstart', function(e){
                    e.dataTransfer.setData('text',e.target.id);
                }, false);
                tilecanvas.addEventListener('dragenter', handleEvents, false);
                tilecanvas.addEventListener('dragover', handleEvents, false);
                tilecanvas.addEventListener('dragleave', handleEvents, false);
                tilecanvas.addEventListener('dragend', handleEvents, false);
        }
        document.body.appendChild(document.createElement("br"))
        var dropzone=document.getElementById('dropzone');
        dropzone.addEventListener('dragover',function(e){e.preventDefault(); return(false);});
        dropzone.addEventListener('dragenter',function(e){return(false);});
        dropzone.addEventListener('drop',function(e){
            $results.text('You dropped: '+e.dataTransfer.getData('text'));
            return(false);
        });
    }

    function handleEvents(e){ return(false); }

}); // end $(function(){});
</script>
</head>
<body>
    <h4 id='results'>Drag 1+ of the image strips</h4>
    <div id='dropzone' droppable='true'>Drop Here.</div>
</body>
</html>

Upvotes: 1

user1693593
user1693593

Reputation:

You can solve it by:

  • Using a container div for the tiles
  • Set fixed width for container element
  • Adjust the CSS for canvas element to float

Live example

(note: added random alpha for the tiles/demo to increase visibility)

var img = new Image();
img.onload = render;
img.src = "http://www.psdgraphics.com/file/colorful-triangles-background.jpg";

function render() {

  var cont = document.getElementById("cont");

  for (var y = 0; y < 16; y++) {
    for (var x = 0; x < 16; x++) {
      var tilecanvas = document.createElement("canvas");
      var tilectx = tilecanvas.getContext("2d");
      tilecanvas.width = 64;
      tilecanvas.height = 64;
      tilecanvas.draggable = true;

      tilectx.globalAlpha = Math.random() + 0.5; // just to increase visuals
      
      tilectx.drawImage(img, x * 64, y * 64, 64, 64, 0, 0, 64, 64);
      cont.appendChild(tilecanvas);
    }
  }
}
#cont {width: 1024px;border: 1px solid #000}
canvas {float:left}
<div id="cont"></div>

Upvotes: 1

Related Questions