\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Canvas Object}
\usepackage[
pdftitle={Canvas Object}
pdfsubject={Methoden und Attribute des Canvas Objekts inklusive derer Definitionen}
pdfauthor={Udo Schmal}
pdfkeywords={Canvas, HTML5, scale, rotate, translate, transform}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Canvas Object
\singlespacing
{\LARGE \textbf{\label{sec:title}Canvas Object}}

Hier ein Beispiel generiert aus \href{http://www.gocher.me/SVG}{SVG}, mit Hilfe von Adobe Illustrator und Ai2Canvas, der \ref{sec:code}Code steht weiter unten.
\label{sec:canvas}
\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
\textbf{Canvas element} & Attribute & \textbf{width} & unsigned long (default 300) \\
\hline
\textbf{height} & unsigned long (default 150) \\
\hline
Method & \textbf{toDataURL} & string type (optional), any args (Variadic) \emph{returns string } \\
\hline
\textbf{getContext} & string contextId \emph{returns Object} \\
\hline
\textbf{2D Context} & Attribute & \textbf{canvas} & HTMLCanvasObhect (readonly) \\
\hline
Method & \textbf{save} & \newline
 \\
\hline
\textbf{restore} & \newline
 \\
\hline
\textbf{Transformation} & Method & \textbf{scale} & float x, float y \\
\hline
\textbf{rotate} & float angle \\
\hline
\textbf{translate} & float x, float y \\
\hline
\textbf{transform} & float m11, float m12, float m21, float m22, float dx, float dy \\
\hline
\textbf{setTransform} & float m11, float m12, float m21, float m22, float dx, float dy \\
\hline
\textbf{Image drawing} & Method & \textbf{drawImage} & 
Object image, float dx, float dy, float dw (optional), float dh (optional) \emph{(das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)}
 \\
\hline
Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh \emph{(das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)} \\
\hline
\textbf{Compositing} & Attribute & \textbf{globalAlpha} & float (default 1.0) \\
\hline
\textbf{globalCompositeOperation} & string (default source-over) \emph{Unterstützte Werte: source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy and xor} \\
\hline
\textbf{Line styles} & Attribute & \textbf{lineWidth} & float (default 1.0) \\
\hline
\textbf{lineCap} & string (default butt) \emph{ Unterstützte Werte: butt, round, square} \\
\hline
\textbf{lineJoin} & string (default miter) \emph{ Unterstütze Werte: round, bevel, miter} \\
\hline
\textbf{miterLimit} & float (default 10) \\
\hline
\textbf{Colors, styles and shadows} & Attribute & \textbf{strokeStyle} & any (default black) \\
\hline
\textbf{fillStyle} & any (default black) \\
\hline
\textbf{shadowOffsetX} & float (default 0.0) \\
\hline
\textbf{shadowOffsetY} & float (default 0.0) \\
\hline
\textbf{shadowBlur} & float (default 0.0) \\
\hline
\textbf{shadowColor} & string (default transparent black) \\
\hline
Method & \textbf{createLinearGradient} & float x0, float y0, float x1, float y1\emph{ returns CanvasGradient} \\
\hline
\textbf{createRadialGradient} & float x0, float y0, float r0, float x1, float y1, float r1 \emph{returns CanvasGradient} \\
\hline
\textbf{createPattern} & Object image, string replication \emph{returns CanvasGradient}\emph{(das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)} \\
\hline
\textbf{\emph{CanvasGradient}} & Method & \textbf{addColorStop} & float offset, string color \\
\hline
\textbf{Path} & Method & \textbf{beginPath} & \newline
 \\
\hline
\textbf{closePath} & \newline
 \\
\hline
\textbf{fill} & \newline
 \\
\hline
\textbf{stroke} & \newline
 \\
\hline
\textbf{clip} & \newline
 \\
\hline
\textbf{moveTo} & float x, float y \\
\hline
\textbf{lineTo} & float x, float y \\
\hline
\textbf{quadraticCurveTo} & float cpx, float cpy, float x, float y \\
\hline
\textbf{bezierCurveTo} & float cp1x, float cp1y, float cp2x, float cp2y, float x, float y \\
\hline
\textbf{arcTo} & float x1, float y1, float x2, float y2, float radius \\
\hline
\textbf{arc} & float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise \\
\hline
\textbf{rect} & float x, float y, fload w, fload h \\
\hline
\textbf{isPointInPath} & float x, float y, \emph{returns boolean} \\
\hline
\textbf{Text} & Attribute & \textbf{font} & string (default 10px sans-serif) \\
\hline
\textbf{textAlign} & string (default start) \emph{ Unterstütze Werte: start, end, left, right, center} \\
\hline
\textbf{textBaseline} & string (default alphabetic) \emph{ Unterstütze Werte: top, hanging, middle, alphabetic, ideographic, bottom} \\
\hline
Method & \textbf{fillText} & string text, float x, float y, float maxWidth (optional) \\
\hline
\textbf{strokeText} & string text, float x, float y, float maxWidth (optional) \\
\hline
\textbf{measureText} & string text,\emph{ returns TextMetrics} \\
\hline
\emph{\textbf{TextMetrics}} & Attribute & \textbf{width} & float (readonly) \\
\hline
\textbf{Rectangles} & Method & \textbf{clearRect} & float x, float y, float w, float h \\
\hline
\textbf{fillRect} & float x, float y, float w, float h \\
\hline
\textbf{strokeRect} & float x, float y, float w, float h \\
\hline
\textbf{Pixel manipulation} & Method & \textbf{createImageData} & float sw, float sh, \emph{returns ImageData} \\
\hline
\newline
 & ImageData imagedata \\
\hline
\textbf{getImageData} & float sx, float sy, float sw, float sh,\emph{ returns ImageData} \\
\hline
\textbf{putImageData} & ImageData imagedata, float dx, float dy, float dirtyX (optional), float dirtyY (optional), float dirtyWidth (optional), float dirtyHight (optional) \\
\hline
Attribute & \textbf{width} & unsigned long (read only) \\
\hline
\textbf{height} & unsigned long (read only) \\
\hline
\textbf{data} & CanvasPixelArray (read only) \\
\hline
\emph{\textbf{CanvasPixelArray}} & Attribute & \textbf{length} & unsigned long (read only) \\
\hline
\end{tabularx}

\singlespacing
{\small \textbf{\label{sec:code}HTML:}}

\href{http://www.gocher.me/code/HTML5_logo.htm}{HTML5\_logo.htm}

\singlespacing
{\small \textbf{JavaScript:}}

\href{http://www.gocher.me/code/HTML5_logo.js}{HTML5\_logo.js}
\label{sec:HTML5_logo.js}\end{document}