// canvas element
interface HTMLCanvasElement : HTMLElement {
  // rozměry canvasu
  attribute unsigned long width;
  attribute unsigned long height;

  // reprezentace canvasu pomocí obrázkových dat
  DOMString toDataURL(in optional DOMString type, in any... args);

  // objekt pro samotné kreslení
  // CanvasRenderingContext2D
  object getContext(in DOMString contextId);
};

// objekt získaný z canvasu na který se kreslí
// (pomocí něhož se kreslí)
interface CanvasRenderingContext2D {

  // canvas element
  readonly attribute HTMLCanvasElement canvas;

  // stav (stack)
  void save();    // ulož stav do stacku
  void restore(); // obnov stav ze stacku

  // transformace
  void scale(in float x, in float y);     // zvětšení / zmenšení
  void rotate(in float angle);            // rotace
  void translate(in float x, in float y); // posun souřadnic
  void transform(in float m11,            // uprav transformaci
    in float m12, in float m21,
    in float m22, in float dx,
    in float dy
  );
  void setTransform(in float m11,         // nastav transformaci
    in float m12, in float m21,
    in float m22, in float dx,
    in float dy
  );

  // globální nastavení pro skládání
  attribute float globalAlpha;                  // průhlednost
  attribute DOMString globalCompositeOperation; // překrytí

  // barvy
  attribute any strokeStyle;  // barva čáry
  attribute any fillStyle;    // barva výplně

  // přechody
  CanvasGradient createLinearGradient(      // lineární přechod
    in float x0, in float y0, in float x1,
    in float y1
  );
  CanvasGradient createRadialGradient(      // kruhový přechod
    in float x0, in float y0, in float r0,
    in float x1, in float y1, in float r1
  );

  // vzory
  CanvasPattern createPattern(              // vzor z obrázku
    in HTMLImageElement image,
    in DOMString repetition
  );
  CanvasPattern createPattern(              // vzor z canvasu
    in HTMLCanvasElement image,
    in DOMString repetition
  );
  CanvasPattern createPattern(              //vzor z videa
    in HTMLVideoElement image,
    in DOMString repetition
  );

  // nastavení čáry
  attribute float lineWidth;    // šířka čáry
  attribute DOMString lineCap;  // ukončení čáry
  attribute DOMString lineJoin; // navázání čáry
  attribute float miterLimit;   // skosení čáry

  // stíny
  attribute float shadowOffsetX;    // posun na souřadnici X
  attribute float shadowOffsetY;    // posun na souřadnici Y
  attribute float shadowBlur;       // rozptyl
  attribute DOMString shadowColor;  // barva

  // obdélník
  void clearRect(                   // "vyčisti obdélník"
    in float x, in float y,         //   funkce nastaví všechny
    in float w, in float h          //   pixely na průhledné
  );
  void fillRect(                    // vyplň obdélník
    in float x, in float y,
    in float w, in float h
  );
  void strokeRect(                  // nakresli obdélník;
    in float x, in float y,         //   obvod
    in float w, in float h
  );

  // funkce pro cesty (path)
  void beginPath();                 // začít novou path
  void closePath();                 // uzavřít path
  void moveTo(                      // funkce vytvoří novou
    in float x, in float y          //   path začínající
  );                                //   na daném bodě
  void lineTo(                      // funkce přidá čáru
    in float x, in float y
  );
  void quadraticCurveTo(            // funkce přidá křivku
    in float cpx, in float cpy,
    in float x, in float y
  );
  void bezierCurveTo(               // funkce přidá křivku
    in float cp1x, in float cp1y,
    in float cp2x, in float cp2y,
    in float x, in float y
  );
  void arcTo(                       // funkce přidá část kružnice
    in float x1, in float y1,
    in float x2, in float y2,
    in float radius
  );
  void rect(                        // funkce vytvoří path
    in float x, in float y,         //   ze zadaného obdélníka
    in float w, in float h          //   a uzavře ji
  );
  void arc(                         // funkce přidá část kružnice
    in float x, in float y,
    in float radius, in float startAngle,
    in float endAngle,
    in boolean anticlockwise
  );
  void fill();                      // funkce vyplní cestu
  void stroke();                    // funkce vykreslí obvod cesty
  void clip();                      // funkce nastaví clipping region
  boolean isPointInPath(in float x, in float y);

  // focus 
  boolean drawFocusRing(              // funkce vykreslí focus
    in Element element,               //   tak jak je v daném
    in float xCaret,                  //   systému zvykem
    in float yCaret,
    in optional boolean canDrawCustom
  );

  // text
  attribute DOMString font;         // font (CSS font)
  attribute DOMString textAlign;    // horizontální zarovnání
  attribute DOMString textBaseline; // vertikální zarovnání
  void fillText(                    // funkce vykreslí text
    in DOMString text, in float x,
    in float y,
    in optional float maxWidth
  );
  void strokeText(                  // funkce vykreslí text
    in DOMString text,
    in float x,
    in float y,
    in optional float maxWidth
  );
  TextMetrics measureText(          // funkce zjistí délku
    in DOMString text               //   vykresleného textu
  );

  // vykreslení obrázku
  // funkce na canvas vykreslí obrázek daný
  // jiným obrázkem, canvasem nebo videem
  // na základě zadaných parametrů
  void drawImage(
    in HTMLImageElement image, in float dx, in float dy,
    in optional float dw, in float dh
  );
  void drawImage(
    in HTMLImageElement image, in float sx, in float sy,
    in float sw, in float sh, in float dx, in float dy,
    in float dw, in float dh
  );
  void drawImage(
    in HTMLCanvasElement image, in float dx,
    in float dy, in optional float dw, in float dh
  );
  void drawImage(
    in HTMLCanvasElement image, in float sx, in float sy,
    in float sw, in float sh, in float dx, in float dy,
    in float dw, in float dh
  );
  void drawImage(
    in HTMLVideoElement image, in float dx, in float dy,
    in optional float dw, in float dh
  );
  void drawImage(
    in HTMLVideoElement image, in float sx, in float sy,
    in float sw, in float sh, in float dx, in float dy,
    in float dw, in float dh
  );

  // nastavení bodů (pixelů)
  ImageData createImageData(        // funkce vytvoří
    in float sw, in float sh        //   nová data pro obrázek
  );                                //   s danými rozměry
  ImageData createImageData(        // funkce vytvoří
    in ImageData imagedata          //   nová data pro obrázek
  );                                //   s rozměry zadaných dat
  ImageData getImageData(           // funkce načte data pro obrázek
    in float sx, in float sy,       //   z canvasu, které leží v
    in float sw, in float sh        //   zadaném obdélníku
  );
  void putImageData(                // nakreslí na context
    in ImageData imagedata,         //   daná data pro obrázek
    in float dx, in float dy,
    in optional float dirtyX,
    in float dirtyY,
    in float dirtyWidth,
    in float dirtyHeight
  );
};

// objekt přechodu (gradientu)
interface CanvasGradient {
  void addColorStop(    // funkce přidá do přechodu novou barvu
    in float offset,
    in DOMString color
  );
};

// objekt vzoru
interface CanvasPattern {
};

// rozměry textu
interface TextMetrics {
  readonly attribute float width; // šířka
};

// data pro obrázek
interface ImageData {
  readonly attribute unsigned long width;   // šířka
  readonly attribute unsigned long height;  // výška
  readonly attribute CanvasPixelArray data; // pole bodů
};

// pole bodů
interface CanvasPixelArray {
  readonly attribute unsigned long length;  // délka pole
  getter octet (                            // funkce pro získání 
    in unsigned long index                  //   bodu
  );
  setter void (                             // funkce pro 
    in unsigned long index, in octet value  //   nastavení bodu
  );
};