Manipulate an image before adding it to a canvas element

Question

I’m adding an image dynamically into a canvas, but I’m not getting it resized properly.

var img = new Image();
img.src = "http://i.stack.imgur.com/lIaBN.jpg";

function inserir() {
  var canvas = document.getElementById('meuCanvas');
  var heightCanvas = 498;
  var widthCanvas = 598;
  context = canvas.getContext('2d');
  context.strokeStyle = '#000000';
  context.fillStyle = '#fff';
  context.clearRect(1, 1, widthCanvas, heightCanvas);

  var tamanho = document.getElementById('tamanho').value;
  var orientacao = document.getElementById('orientacao').value;

  img.height = tamanho;

  rotacionarImagem(orientacao);

  pintar(context);
}


function pintar(context) {
  context.drawImage(img, 10, 10);
}

function rotacionarImagem(orientacao) {
  switch (orientacao) {
    case "N":
      img.style.Transform = "rotate(0deg)"
      img.style.MozTransform = "rotate(0deg)"
      img.style.webkitTransform = "rotate(0deg)"
      break;
    case "L":
      img.style.Transform = "rotate(90deg)"
      img.style.MozTransform = "rotate(90deg)"
      img.style.webkitTransform = "rotate(90deg)"
      break;
    case "S":
      img.style.Transform = "rotate(180deg)"
      img.style.MozTransform = "rotate(180deg)"
      img.style.webkitTransform = "rotate(180deg)"
      break;
    case "O":
      img.style.Transform = "rotate(270deg)"
      img.style.MozTransform = "rotate(270deg)"
      img.style.webkitTransform = "rotate(270deg)"
      break;
    default:
      break;
  }
}

Virar para:
<select id="orientacao">
  <option value="N">Norte</option>
  <option value="S">Sul</option>
  <option value="L">Leste</option>
  <option value="O">Oeste</option>
</select>
Tamanho (em pixel):
<input id="tamanho" type="text">
<input class="" value="Inserir" onclick="inserir();" type="button">
<canvas id="meuCanvas" width="600" height="500"></canvas>

In fact I need to resize it, rotate it and place it in a specific location of the canvas.

I know the function drawImage has more arguments, but this difficult to work with them, mainly in order to rotate the image...

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img - Specifies the image to use.

Sx (optional) - The x coordinate where an image crop starts.

Sy (optional) - The y coordinate where an image crop starts.

swidth (optional) - Image width cut.

sheight (optional) - The height of the image cropped.

x The x coordinate where to place the image on the screen.

y The y coordinate where to place the image on the screen.

width (optional) - The width of the image to be used (image snippet or zoom)

height (optional) - The height of the image to be used (snippet or image reduction)

I thought it would be easier to create an image with the attribute hidden the part in my form and after manipulating it add in the canvas, but that way the image is drawn in the initial way, before you start manipulating it...

---

Edit

Using a function found in the OS in English I just can’t adapt to position in the correct location:

var img = new Image();
img.src = "http://i.stack.imgur.com/lIaBN.jpg";
var orientacao, tamanho, x, y;

function inserir() {
  var canvas = document.getElementById('meuCanvas');
  var heightCanvas = 498;
  var widthCanvas = 598;

  context = canvas.getContext('2d');
  context.strokeStyle = '#000000';
  context.fillStyle = '#fff';
  context.clearRect(1, 1, widthCanvas, heightCanvas);

  tamanho = document.getElementById('tamanho').value;
  orientacao = document.getElementById('orientacao').value;
  x = document.getElementById('x').value;
  y = document.getElementById('y').value;

  context.save();
  rotacionarImagem(canvas, context);
  pintar(context, tamanho);
  context.restore();
}


function pintar(context, tamanho) {
  context.drawImage(img, -x / 2, -y / 2, tamanho, tamanho);
}

function rotacionarImagem(canvas, context) {
  switch (orientacao) {
    case "N":
      angulo = 0;
      break;
    case "L":
      angulo = 90;
      break;
    case "S":
      angulo = 180;
      break;
    case "O":
      angulo = 270;
      break;
    default:
      break;
  }
  context.translate(canvas.width / 2, canvas.height / 2);
  context.rotate(angulo * Math.PI / 180);
}

Virar para:
<select id="orientacao">
  <option value="N">Norte</option>
  <option value="S">Sul</option>
  <option value="L">Leste</option>
  <option value="O">Oeste</option>
</select>
Tamanho (em pixel):
<input id="tamanho" type="text">Posição (x,y):
<input id="x" type="text">
<input id="y" type="text">
<input class="" value="Inserir" onclick="inserir();" type="button">
<canvas id="meuCanvas" width="600" height="500"></canvas>

Thus the image rotates only on the axis itself if the tamanho the image is the same value as x and y...

Answer 1

canvas does not recognize HTML properties, so there is no point in modifying the image element styles.

To rotate the image by its own axis it is sufficient to declare the central positions of the image in the method .translate(...), then draw it on the canvas at half the size of yourself. Try:

// cria o ângulo da imagem
var angulo = orientacao === 'N' ? 0   :
             orientacao === 'L' ? 90  :
             orientacao === 'S' ? 180 :
                                  270; // O

// transforma o canvas com as posições centrais da imagem
context.translate(x + (tamanho / 2), y + (tamanho / 2));

// rotaciona
context.rotate((angulo * Math.PI) / 180);

// desenha a imagem na metade do seu tamanho negativo
context.drawImage(img, -tamanho / 2, -tamanho / 2, tamanho, tamanho);

// desfaz a rotação
context.rotate((-angulo * Math.PI) / 180);

// destransforma
context.translate(-x - (tamanho / 2), -y - (tamanho / 2));

Based on a reply of one of my questions.