Os seus resultados da pesquisa

    CanvasRenderingContext2D.strokeRect()

    O método CanvasRenderingContext2D.strokeRect() da API Canvas 2D desenha um retângulo na posição (x, y), que possui uma largura (width) w e uma altura (height) h, e não tem nenhum preenchimento (estilo stroke).

    Sintaxe

    void ctx.strokeRect(x, y, width, height);

    Parâmetros

    x
    O valor da coordenada x para o ponto inicial do retângulo.
    y
    O valor da coordenada y para o ponto inicial do retângulo.
    width
    A largura do retângulo.
    height
    A altura do retângulo.

    Exemplos

    Usando o método strokeRect

    Isto é só um simples trecho de código que usa o método strokeRect.

    HTML

    <canvas id="canvas"></canvas>

    JavaScript

    var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.strokeStyle = 'green';
ctx.strokeRect(10, 10, 100, 100);

    Edite o código abaixo e veja as alterações instantâneas no canvas:

    Playable code
    <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.strokeStyle = "green";
ctx.strokeRect(10, 10, 100, 100);</textarea>

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

    Especificações

    Especificação Estado Comentário
    WHATWG HTML Living Standard
    The definition of 'CanvasRenderingContext2D.strokeRect' in that specification.    		 Living Standard  

    Compatibilidade em Navegadores

    Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
    Suporte básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
    Feature Android Chrome para Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Suporte básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

    Veja também

    Etiquetas do documento e colaboradores

    Etiquetas: 
     Colaboradores desta página: MarceloBRN
     Última atualização por: MarceloBRN,