morvanabonin/aprendendo_canvas.html

## aprendendo_canvas.html

<canvas id="nome_canvas" width="largura" height="altura">
    Este é um exemplo de como começar com Canvas. Utilizamos a tag <canvas>. Os atributos width e height informam a largura e a altura,             respectivamente, da área de desenho. É importante também informar um id para podermos trabalhar com ele no código Javascript. (trecho adaptado do livro HTML5 Canvas e JavaScript)
</canvas>


## aprendendo_canvas2.html
<canvas id="meu_canvas" width="300" height="300">
    Seu navegador não suporta o Canvas do HTML5. </br>
    Procure atualizá-lo
</canvas>

## aprendendo_canvas3.html
<style>
    #meu_canvas {
        width: 200px;
        height: 200px;
    }
</style>
<canvas id="meu_canvas" width="100" height="100"></canvas>

## contexto_grafico.html
<!DOCTYPE html>
<html>
    <head>
        <title> Processando o Canvas após a tag</title>
    </head>

    <body>
        <canvas id="meu_canvas" width="200" height="200"></canvas>
            <script>
                //Aqui obteremos o contexto gráfico e trabalharemos :)
            </script>
    </body>
</html>


## contexto_grafico_head.html
<!DOCTYPE html>
<head>
    <title>
        Processando o Canvas na seção HEAD
    </title>
    <script>
        window.onload = function() {
            //Aqui trabalharemos com Canvas
        }
    </script>
</head>

<body>
    <canvas id="meu_canvas" width="200" height="200">
    </canvas>
</body>

## get_context.html
<!DOCTYPE html>
<html>
    <head>
        <title>
            getContext do Canvas
        </title>
    </head>
    <body>
        <canvas id="meu_canvas" width="200" height="200"></canvas>
        <script>
            //Referenciando o Canvas
            var canvas = document.getElementById("meu_canvas");

            //Obtendo o contexto gráfico
            var context = canvas.getContext('2d');
        </script>
    </body>
</html>

	<canvas id="nome_canvas" width="largura" height="altura">
	Este é um exemplo de como começar com Canvas. Utilizamos a tag <canvas>. Os atributos width e height informam a largura e a altura, respectivamente, da área de desenho. É importante também informar um id para podermos trabalhar com ele no código Javascript. (trecho adaptado do livro HTML5 Canvas e JavaScript)
	</canvas>
	<canvas id="meu_canvas" width="300" height="300">
	Seu navegador não suporta o Canvas do HTML5. </br>
	Procure atualizá-lo
	</canvas>
	<style>
	#meu_canvas {
	width: 200px;
	height: 200px;
	}
	</style>
	<canvas id="meu_canvas" width="100" height="100"></canvas>
	<!DOCTYPE html>
	<html>
	<head>
	<title> Processando o Canvas após a tag</title>
	</head>

	<body>
	<canvas id="meu_canvas" width="200" height="200"></canvas>
	<script>
	//Aqui obteremos o contexto gráfico e trabalharemos :)
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<head>
	<title>
	Processando o Canvas na seção HEAD
	</title>
	<script>
	window.onload = function() {
	//Aqui trabalharemos com Canvas
	}
	</script>
	</head>

	<body>
	<canvas id="meu_canvas" width="200" height="200">
	</canvas>
	</body>