2

I'm generating image programmatically inside canvas.

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// here I have some code in loop setting individual pixels
// ...
//
// save image to variable
var dataURL = canvas.toDataURL();

How can I rotate created image by 90 degrees?

EDIT: This is not duplicate because I don't draw image, it is never visible. I only want to generate it, rotate it and save to variable.

EDIT2: I'm trying to rotate it with this code:

ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(90 * Math.PI / 180)

But it doesn't work

EDIT3: This is more complex example of my code:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.setPixel = function (x, y, color) {
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
}
for (var i in data) {
    for (var j in data[i]) {
        switch (data[i][j]) {
            case 1:
                var color = '#ffff00',
                    type = 'w'
                break
            case 3:
                var rgb = (256 - parseInt(pixels[i][j]) - minus.grass).toString(16),
                    color = '#00' + rgb + '00',
                    type = 'g'
                break
            case 4:
                var rgb = (256 - parseInt(pixels[i][j]) - minus.hills).toString(16),
                    color = '#' + rgb + rgb + '00',
                    type = 'h'
                break
            case 5:
                var rgb = (parseInt(pixels[i][j]) + minus.mountains).toString(16),
                    color = '#' + rgb + rgb + rgb,
                    type = 'm'
                break
            case 6:
                var rgb = (parseInt(pixels[i][j]) + minus.snow).toString(16),
                    color = '#' + rgb + rgb + rgb,
                    type = 'm'
                break
        }
        if (i % fieldSize == 0 && j % fieldSize == 0) {
            if (notSet(fields[y])) {
                fields[y] = []
            }
            fields[y][x] = type
            x++
        }
        canvas.setPixel(i, j, color)
    }
    if (i % fieldSize == 0) {
        x = 0
        y++
    }
}
ctx.translate(canvas.width / 2, canvas.height / 2)
ctx.rotate(90 * Math.PI / 180)    

var token = {
    type: 'save',
    map: canvas.toDataURL('image/png')
}

ws.send(JSON.stringify(token))
Pogromca Motyli
  • 130
  • 1
  • 11
  • 2
    Possible duplicate of [HTML5 Canvas Rotate Image](http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image) – markE Jan 08 '16 at 02:21
  • Try taking a look at this answer http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image ; however, if I understand your question correctly, you may find this answer http://gamedev.stackexchange.com/questions/67274/is-it-possible-to-rotate-an-image-on-an-html5-canvas-without-rotating-the-whole specifically useful. – dat Jan 08 '16 at 02:22
  • I don't draw image, it is never visible and I need to rotate whole image (canvas). – Pogromca Motyli Jan 08 '16 at 02:28
  • Even if you don't render it on the page, you draw it. markE's duplicate still applies. – Kaiido Jan 08 '16 at 05:06
  • @Kaiido I don't use drawImage in my code and ctx.rotate dosen't work. So it is not duplicate! – Pogromca Motyli Jan 08 '16 at 05:58
  • `fill()`, `stroke()`, `putImageData()` and all related methods are drawing methods. If you don't draw anything, then you are only getting the dataURL of a transparent-black image, do you really need to rotate it? – Kaiido Jan 08 '16 at 06:00
  • Ps : do you know that you can `ctx.drawImage(anotherCanvasElement, x, y)` ? In term of performances, it's way better than storing a datURL version that you'll have to load again into an `` – Kaiido Jan 08 '16 at 06:03
  • @Kaiido I use canvas.setPixel(i, j, color). I send this data using websokets to server and than I write it on server disk using PHP. – Pogromca Motyli Jan 08 '16 at 07:34
  • `setPixel` is not a native method, if you are using a library, please mention it in an [edit]. Also, `translate` and `rotate` should be called before you call the drawing methods. – Kaiido Jan 09 '16 at 10:23
  • @Kaiido so I was mistaken (I use fillRect method) p.s. I moved translate and rotate before drawing loop but it still dosen't work – Pogromca Motyli Jan 10 '16 at 04:05

1 Answers1

0

To rotate image by 90 degrees I had to put

ctx.translate(0, canvas.height)
ctx.rotate(270 * Math.PI / 180)

before 

for (var i in data) {
    for (var j in data[i]) {
        switch (data[i][j]) {
        // ... drawing pixels
        }
    }
}
Pogromca Motyli
  • 130
  • 1
  • 11