HTML5 GameDev 01-09

In this example below you will see how to do a HTML5 GameDev 01-09 with some HTML / CSS and Javascript

A series of simple scripts supporting a basic level tutorial about canvas games. Another pig, what’s wrong with me?

This awesome code was written by DanieleAlessandra, you can see more from this user in the personal repository.
You can find the original code on
Copyright DanieleAlessandra ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>HTML5 GameDev 01-09</title>
      <link rel="stylesheet" href="css/style.css">



  <canvas id="main" width="550" height="400">Contenuto alternativo</canvas>

<img src="" />

    <script  src="js/index.js"></script>



/*Downloaded from */
html, body {
  margin: 0;
canvas {
  height: auto; 
  height: 100%;
  border:10px solid #069;
img {
  display: none;

/*Downloaded from */
/// Recupero un riferimento al <canvas>
var canvas = document.getElementsByTagName('canvas')[0];
/// Recupero un riferimento al contesto bidimensionale
var context = canvas.getContext('2d');
/// Recupero un riferimento a un’immagine che si trova in questa stessa pagina
var image = document.getElementsByTagName('img')[0];

/// Quando tutto è stato caricato...
window.onload = function() {
  /// Sposto il punto di registrazione al centro del Canvas
  context.translate(275, 200);
  /// Applico una rotazione di 45 gradi (un quarto di pigreco)
  context.rotate(Math.PI / 4);
  /// Sposto il punto di registrazione nuovamente in alto a sinistra
  context.translate(-275, -200);
  /// Disegno l’immagine nel contesto,
  /// spostandola di 20 pixel verso destra verso il basso,
  /// ridimensionandola a 510pixel in larghezza e 460 pixel in altezza
  context.drawImage(image, 50, 30, 100, 100, 20, 20, 510, 360);