%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

\usepackage{listings}
\usepackage{color}
\definecolor{lightgray}{rgb}{.9,.9,.9}
\definecolor{darkgray}{rgb}{.4,.4,.4}
\definecolor{purple}{rgb}{0.65, 0.12, 0.82}

\lstdefinelanguage{JavaScript}{
  keywords={typeof, new, true, false, catch, function, return, null, catch, switch, var, if, in, while, do, else, case, break},
  keywordstyle=\color{blue}\bfseries,
  ndkeywords={class, export, boolean, throw, implements, import, this},
  ndkeywordstyle=\color{darkgray}\bfseries,
  identifierstyle=\color{black},
  sensitive=false,
  comment=[l]{//},
  morecomment=[s]{/*}{*/},
  commentstyle=\color{purple}\ttfamily,
  stringstyle=\color{red}\ttfamily,
  morestring=[b]',
  morestring=[b]"
}

\lstset{
   language=JavaScript,
   backgroundcolor=\color{lightgray},
   extendedchars=true,
   basicstyle=\footnotesize\ttfamily,
   showstringspaces=false,
   showspaces=false,   
   tabsize=2,
   breaklines=true,
   showtabs=false,
   captionpos=b
}

%Kopfzeile
\ihead{JavaScript}
\chead{}
\ohead{http://kohnlehome.de/html/canvas.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}


\begin{document}
% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Canvas
\end{center}


\section{HTML-Element}
\begin{lstlisting}[]
<canvas id="zeichenbrett" width="400" height="300"></canvas>
\end{lstlisting}

\section{Zeichnen mit JavaScript}
\subsection{Kontext zum Zeichnen}
\begin{lstlisting}[]
var canv = document.getElementById("zeichenbrett");
var context = canv.getContext("2d");
\end{lstlisting}


\subsection{Farbe}
\begin{lstlisting}[]
farbe = "orange";                // Farbbezeichner
farbe = "#ffffff";               // Hexwerte
farbe = "rgb(255,255,255)";      // rot, gruen, blau jeweils von 0-255
farbe = "rgba(255,255,255,0.5)"; // mit Transparenz von 0.0 bis 1.0
\end{lstlisting}


\subsection{Zeichenstift}
\begin{lstlisting}[]
context.lineWidth = 5;
context.strokeStyle = farbe;
\end{lstlisting}


\subsection{Pinsel}
\begin{lstlisting}[]
context.fillStyle = farbe;
\end{lstlisting}



\subsection{Zeichnen}
\subsubsection{Rechteck zeichnen}
\begin{lstlisting}[]
context.strokeRect(x,y,breite,hoehe);
\end{lstlisting}


\subsubsection{Rechteck füllen}
\begin{lstlisting}[]
context.fillRect(x,y,breite,hoehe);
\end{lstlisting}

\subsubsection{Rechteck löschen}
\begin{lstlisting}[]
context.clearRect(x,y,breite,hoehe);
\end{lstlisting}


\subsubsection{Linie zeichnen}
\begin{lstlisting}[]
context.beginPath();
context.moveTo(x,y);
context.lineTo(x,y);
context.stroke();
context.closePath();
\end{lstlisting}

\subsubsection{Text zeichnen}
\begin{lstlisting}[]
context.font = "bold 40px monospace";
context.strokeText("Text",x,y);  // Rand 
context.fillText("Text",x,y);   // Fuellung
\end{lstlisting}

\subsubsection{Kreisbogen zeichnen}
\begin{lstlisting}[]
context.beginPath();
context.arc(x, y, radius, startWinkel, endWinkel, gegenUhrzeiger);
context.stroke();
context.fill();
context.closePath();
\end{lstlisting}



\end{document}