HTML and CSS Reference
In-Depth Information
styleHeight
.
value
+
"px;"
;
theCanvas
.
setAttribute
(
"style"
,
styleValue
);
drawScreen
();
}
function
function
createImageDataPressed
(
e
) {
var
var
imageDataDisplay
=
document
.
getElementById
(
"imageDataDisplay"
);
imageDataDisplay
.
value
=
theCanvas
.
toDataURL
();
window
.
open
(
imageDataDisplay
.
value
,
"canvasImage"
,
"left=0,top=0,width="
+
theCanvas
.
width
+
",height="
+
theCanvas
.
height
+
",toolbar=0,resizable=0"
);
}
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvasOne"
width=
"500"
height=
"300"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
<form>
<form>
Text:
<input
<input id=
"textBox"
placeholder=
"your text"
//>
<br>
<br>
Text Font:
<select
<select id=
"textFont"
>
<option
<option value=
"serif"
>
serif
</option>
</option>
<option
<option value=
"sans-serif"
>
sans-serif
</option>
</option>
<option
<option value=
"cursive"
>
cursive
</option>
</option>
<option
<option value=
"fantasy"
>
fantasy
</option>
</option>
<option
<option value=
"monospace"
>
monospace
</option>
</option>
</select>
</select>
<br>
<br>
Font Weight:
<select
<select id=
"fontWeight"
>
<option
<option value=
"normal"
>
normal
</option>
</option>
<option
<option value=
"bold"
>
bold
</option>
</option>
<option
<option value=
"bolder"
>
bolder
</option>
</option>
<option
<option value=
"lighter"
>
lighter
</option>
</option>
</select>
</select>
<br>
<br>
Font Style:
<select
<select id=
"fontStyle"
>
<option
<option value=
"normal"
>
normal
</option>
</option>
