recursal/MDN huggingface dataset:
CanvasRenderingContext2D.stroke()
=================================

O método **`CanvasRenderingContext2D.stroke()`** da API Canvas 2D contorna um dado *path* ou o *path* atual com o estilo atual de traçado usando uma regra de controle diferente de zero.

Sintaxe
-------
```

void ctx.stroke();
void ctx.stroke(path);
```

### Parâmetros

`path`

Um *path* de `Path2D` para contorno.

Exemplos
--------

### Usando o método `stroke`

Isto é só um simples trecho de código que usa o método `stroke` para contornar um *path*.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.stroke();
```


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

<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.rect(10, 10, 100, 100);
ctx.stroke();</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
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-stroke-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`.
CanvasRenderingContext2D.lineTo()
=================================

O método **`CanvasRenderingContext2D.lineTo()`** da API Canvas 2D conecta o último ponto do sub-caminho (*sub-path*) para as coordenadas `x, y`, através de uma linha (mas na realidade não a desenha).

Sintaxe
-------
```

void ctx.lineTo(x, y);
```

### Parâmetros

`x`

O valor da coordenada x que indica o fim da linha.

`y`

O valor da coordenada y que indica o fim da linha.

Exemplos
--------

### Usando o método `lineTo`

sto é só um simples trecho de código que usa o método `lineTo`. Use o `beginPath()` para indicar o *path* onde será desenhada a linha, mova a caneta (*pen*) com `moveTo()` e use o método `stroke()` para desenhar a linha.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();
```


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

<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.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(100, 100);
ctx.stroke();</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
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-lineto-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.moveTo()`
* `CanvasRenderingContext2D.stroke()`
CanvasRenderingContext2D.beginPath()
====================================

O método **`CanvasRenderingContext2D.beginPath()`** da API Canvas 2D inicia um novo caminho (*path*), esvaziando a lista de sub-caminhos (*sub-paths*). Use esse método quando você quiser criar um novo *path*.

Sintaxe
-------
```

void ctx.beginPath();
```

Exemplos
--------

### Usando o método `beginPath`

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

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Primeiro path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Segundo path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


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

<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" style="height:200px">
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120, 120);
ctx.stroke();</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
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-beginpath-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* A definição da interface `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.closePath()`
Event.type
==========

Sumário
-------

Retorna uma string contendo o tipo de evento.

O argumento do evento `EventTarget.addEventListener()` e `EventTarget.removeEventListener()` é caso insensível(case insensitive).

Veja Mozilla event reference (en-US) para obter a lista de tipos de evento disponíveis

Sintaxe
-------
```

event.type
```

Exemplos
--------
```

var string = event.type;
```



```html
<!doctype html>
<html lang="pt-br">
  <head>
    <title>exemplo de tipo</title>

    <script>
 var currEvent = null;

 function getEvtType(evt) {
 currEvent = evt.type;
 document.getElementById("Etype").firstChild.nodeValue = currEvent;
 }
 </script>
  </head>

  <body
 onkeydown="getEvtType(event)"
 onkeyup="getEvtType(event)"
 onmousedown="getEvtType(event)"
 onmouseup="getEvtType(event)">
    <p>
      Pressione uma tecla ou clique com o mouse para obter o tipo de evento.
    </p>
    <p>Tipo de evento: <span id="Etype">-</span></p>
  </body>
</html>
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.isTrusted
===============


 A propriedade **`isTrusted`** da interface `Event`, exclusiva para leitura, é uma booleana (`Boolean` (en-US)) de valor verdadeiro (`true`) se tal evento é disparado pela ação do usuário. Retorna falso (`false`) caso o acionamento do evento seja ocasionado pelo método `EventTarget.dispatchEvent()` ou tenha sido criado ou modificado por um script.
Sintaxe
-------
```

var eventIsTrusted = event.isTrusted;
```

### Valor

`Boolean` (en-US)Exemplo
-------


```js
if (e.isTrusted) {
  /\* The event is trusted \*/
} else {
  /\* The event is not trusted \*/
}
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.stopPropagation()
=======================

Resumo
------

Impede a propagação do evento por seus respectivos listeners.

Sintaxe
-------
```

event.stopPropagation();
```

### Parametros

Nenhum

### Valor retornado

`undefined`.

Exemplo
-------

Veja o exemplo 5: Event Propagation (en-US) no capítulo Eventos para um exemplo mais detalhado desse método e propagação de evento no DOM.

Notas
-----

Veja DOM specification para a explicação do fluxo de eventos. (O DOM Level 3 Events draft possui uma ilustração.)

preventDefault (en-US) é um método de complemento que pode ser usado para previnir a ação padrão do evento que estiver acontecendo.

Especificação
-------------

DOM Level 3 Events: stopPropagation

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.target
============

Uma referência ao objeto que enviou o evento. É diferente de `event.currentTarget` quando o manipulador de eventos é chamado durante a fase de borbulhagem ou captura do evento.

Sintaxe
-------
```

theTarget = event.target
```

Exemplo
-------

A propriedade **`event.target`** pode ser usada para implementar a delegação de eventos.


```js
// Assumindo que existe uma variável 'list' contendo uma instância de um elemento ul de HTML.
function hide(e) {
  // A menos que os itens da lista sejam separados por uma margem, e.target deve ser diferente de e.currentTarget
  e.target.style.visibility = "hidden";
}

list.addEventListener("click", hide, false);

// Se algum elemento (elemento <li> ou um link dentro de um elemento <li> por exemplo) for clicado, ele desaparecerá.
// Só requer um único listener para fazer isso.
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Comparison of Event Targets
Event()
=======

O **`Event()`** cria uma nova `Event`.

Sintaxe
-------
```

 event = new Event(typeArg, eventInit);
```

### Valores

*typeArg*

É uma `DOMString` representa o nome do evento.

*eventInit*Optional

É um dicionário `EventInit`, tendo os seguintes campos:

* `"bubbles"`, opcional e false por default, do tipo `Boolean`, indica se o evento é bubbles ou não.
* `"cancelable"`, opcional e false por default, do tipo `Boolean`, indica se o evento pode ser cancelado ou não.

Exemplo
-------


```js
// criar um evento com bubbles true e que não pode ser cancelado

var ev = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(ev);
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `Event`
Event.preventDefault()
======================

Resumo
------

Cancela o evento se for cancelável, sem parar a propagação do mesmo.

Sintaxe
-------
```

event.preventDefault();
```

Exemplo
-------

Alternar é a ação padrão de clicar em uma caixa de seleção. Este exemplo demonstra como impedir que isso aconteça:


```html
<!doctype html>
<html>
  <head>
    <title>preventDefault example</title>

    <script>
 function stopDefAction(evt) {
 evt.preventDefault();
 }

 document
 .getElementById("my-checkbox")
 .addEventListener("click", stopDefAction, false);
 </script>
  </head>

  <body>
    <p>Please click on the checkbox control.</p>

    <form>
      <input type="checkbox" id="my-checkbox" />
      <label for="my-checkbox">Checkbox</label>
    </form>
  </body>
</html>
```


Você pode ver o `preventDefault` em ação aqui.

O exemplo a seguir demonstra como um input com texto inválido pode ser parado ao chegar ao campo de entrada com o preventDefault().


```html
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>

<script>
```



```js
function Init() {
  var myTextbox = document.getElementById("my-textbox");
  myTextbox.addEventListener("keypress", checkName, false);
}

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      alert(
        "Please use lowercase letters only." +
          "\n" +
          "charCode: " +
          charCode +
          "\n",
      );
    }
  }
}
```



```html
</script>
</head>
<body onload="Init ()">
    <p>Please enter your name using lowercase letters only.</p>
    <form>
        <input type="text" id="my-textbox" />
    </form>
</body>
</html>
```


Aqui está o resultado do código anterior:

Notas
-----

Chamar preventDefault durante qualquer fase do fluxo de eventos cancela o evento, o que significa que qualquer ação padrão normalmente feita pela aplicação como um resultado do evento não ocorrerá.

**Nota:** A partir do Gecko 6.0, chamar o `preventDefault()` faz com que o `event.defaultPrevented` se torne true.

Você pode usar o event.cancelable (en-US) para checar se o evento é cancelável. Chamar o `preventDefault` para um evento não cancelável não fará efeito.

`Se o preventDefault não parar a propagação do evento através do DOM. event.stopPropagation deve ser usada para isso.`

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.srcElement
================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**`Event.srcElement`** é uma propriedade *alias* para a propriedade padrão `Event.target`. É específica para versões antigas do Microsoft Internet Explorer.

Especificações
--------------

Não é parte de nenhuma especificação.

Microsoft tem uma descrição na MSDN.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `Window.event`
Event.currentTarget
===================

Identifica o alvo atual para o evento quando o event percorre o DOM. O currentTarget sempre se refere ao elemento associado ao event handler, ao invés do event.target que identifica o elemento ao qual o evento ocorreu.

Exemplo
-------

`event.currentTarget` é bom para ser usado quando nós queremos associar o mesmo event handler para vários elementos.


```js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // Quando essa função é usada como um event
  // handler: this === e.currentTarget
}

var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  // console: print the clicked <p> element
  ps[i].addEventListener("click", hide, false);
}
// console: print <body>
document.body.addEventListener("click", hide, false);

// Clique e faça os parágrafos desaparecerem
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

Comparativo dos Event Targets
Event.defaultPrevented
======================

### Resumo

Retorna um booleano que indica se ou não `event.preventDefault()` foi chamado no evento.

**Nota:** Você deve usar isso em vez de a não-padrão, método desatualizado `getPreventDefault()` (ver Firefox bug 691151).

### Sintaxe
```

bool = event.defaultPrevented
```

### Exemplo
```

 if (e.defaultPrevented) {
   /* o padrão foi impedido */
 }
```

### Compatibilidade do navegador

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.stopImmediatePropagation()
================================

Evita que outros *listeners* escutem o evento.

Sintaxe
-------
```

event.stopImmediatePropagation();
```

Notas
-----

No caso de um evento onde vários *listeners* o estão escutando, os mesmos são disparados na ordem em que foram adicionados. Porém, se durante uma chamada (ou disparo), `event.stopImmediatePropagation()` for chamado, os demais *listeners* não serão disparados.

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.initEvent()
=================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

O método **`Event.initEvent()`** é usado para inicializar o valor de um `event` criado usando `Document.createEvent()` (en-US).

Eventos inicializados desta maneira precisam ter sido criados com o método `Document.createEvent()` (en-US). Este método precisar ser chamado para definir o evento antes de ser despachado, usando `EventTarget.dispatchEvent()`. Uma vez despachado, não faz mais nada.

**Nota:** **Não use esse método mais, pois está depreciado.**

Ao invés, use construtores de eventos específicos, como `Event()`. A página sobre Criando e disparando eventos (en-US) detalha mais informações sobre o uso desses eventos.

Syntax
------
```

event.initEvent(tipo, bubbles, cancelable);
```


`tipo`

É um `DOMString` definido o tipo do evento.

`bolhas`

É um `Boolean` decidindo se o evento precisa ser enviado para cima, na cadeia de eventos ou não. Uma vez definido, a propriedade read-only `Event.bubbles` (en-US) irá informar o seu valor.

`cancelable`

É um `Boolean` definindo se o evento pode ser cancelado. Uma vez definido, a propriedade read-only `Event.cancelable` (en-US) will irá informar o seu valor.

Exemplo
-------
```

// Cria o evento.
var event = document.createEvent('Event');

// Cria um evento de clique que borbulha e
// não pode ser cancelado
event.initEvent('click', true, false);

// Escuta este evento.
elem.addEventListener('click', function (e) {
  // e.target matches elem
}, false);

elem.dispatchEvent(event);
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-initevent① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O construtor para usar ao invés deste método descontinuado: `Event()`. Construtores mais específicos também podem ser usados.
AbortSignal.aborted
===================

**Experimental:** **Esta é uma tecnologia experimental (en-US)**  
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade **`aborted`** é apenas para leitura e fornece um valor `Boolean` (en-US) indicando se as solicitações ao objeto sinal de comunicação DOM forão abortadas (`true`) ou não (`false`).

Sintaxe
-------


```js
var isAborted = abortSignal.aborted;
```

### Valor

Um valor `Boolean` (en-US)

Exemplos
--------

No fragmento abaixo, criamos um novo objeto `AbortController` e recebemos dele um sinal `AbortSignal` (disponível na propriedade `signal`). Depois checamos se o sinal foi ou não abortado usando a propriedade `aborted`, e então enviamos um log apropriado para o console.


```js
var controller = new AbortController();
var signal = controller.signal;

// ...

signal.aborted
  ? console.log("Pedido foi abortado")
  : console.log("Pedido nao foi abortado");
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-aborted① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* Documentação de busca API
HTMLElement.offsetHeight
========================

A propriedade **`HTMLElement.offsetHeight`** é somente leitura e retorna um valor do tipo inteiro a altura de um elemento incluindo padding-top+padding-bottom+border-top+border-bottom.

Typically, an element's `offsetHeight` is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar (if present, if rendered).

For the document body object, the measurement includes total linear content height instead of the element's CSS height. Floated elements extending below other linear content are ignored.

**Nota:** This property will round the value to an integer. If you need a fractional value, use `element.getBoundingClientRect()`.

Syntax
------
```

var intElemOffsetHeight = element.offsetHeight;
```


*intElemOffsetHeight* is a variable storing an integer corresponding to the offsetHeight pixel value of the element. The offsetHeight property is read-only.

Example
-------

![Image:Dimensions-offset.png](/pt-BR/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.

Especificações
--------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See Also
--------

* `Element.clientHeight`
* `Element.scrollHeight` (en-US)
* `HTMLElement.offsetWidth`
* Determining the dimensions of elements (en-US)
* MSDN: Measuring Element Dimension and Location
Element.accessKey
=================

A propriedade **Element.accessKey** define a tecla pelo qual o usuário pode pressionar para saltar para este elemento.

**Nota:** Nota: *A propriedade **Element.accessKey** é raramente usada por causa dos conflitos múltiplos com os atalhos pré-definidos nos navegadores. Para contornar isto, os navegadores implementam o comportamento da tecla de acesso se as teclas são pressionadas com outras teclas "qualificadas" (como Alt + tecla de acesso).*