HTML5 Tips
Canvas
HTML
<canvas style="width:1000px; height:1000px;" id="thecanvas"></canvas>
JavaScript Operation
Get Context (2d)
var oCanvas = document.getElementById("thecanvas"); var oCtx = oCanvas.getContext("2d");
Add Text and Edit Text Style
//Example of Text Shadow. If you make them to 0, you can remove text shadow oCtx.shadowColor = "#000000"; oCtx.shadowOffsetX = 0.5; oCtx.shadowOffsetY = 0.5; oCtx.shadowBlur = 0.5; //Example of Text Style oCtx.font = "normal 18px Arial"; oCtx.fillStyle = "#ccc"; //Draw Text oCtx.fillText("Hello World", 0, 0); //x-axis and y-axis
Draw Existing Image to Canvas
var imageObj = new Image(); //get src of existing image imageObj.src = document.getElementById('existing_image').src; oCtx.drawImage(imageObj, 0, 0); //x-axis and y-axis
Download Canvas as Image
/**Create a (hidden) image to hold canvas data: <img hidden src="" id="downloadCanvas" /> **/ var dataURL = oCanvas.toDataURL('image/png'); document.getElementById('downloadCanvas').width = oCanvas.width; document.getElementById('downloadCanvas').height = oCanvas.height; document.getElementById('downloadCanvas').src = dataURL; /** If you want to have a download link to download canvas image, make sure you have HTML such as: <a id="downloadBanner" href="#" class="button" download="banner_result.png">Download</a> Note "download" attribute is able to re-name the downloadable image. **/ document.getElementById('downloadBanner').href = dataURL;
Clear Canvas
//You may want to do this to remove unwanted elements from canvas oCtx.clearRect(0, 0, oCanvas.width, oCanvas.height);
Drag and Drop
Examples are taken from w3schools.com.
General Process
Draable stuff has draggable = 'true'
attribute; has ondragstart
attribute, which takes a method.
Destination stuff has ondrop
and ondragover
attribute. Both of them take method.
ondragstart
This attribute takes a JavaScript method. This method takes a event
parameter and describe what will happen when you start to drag.
You need to set the data to drag by using event.dataTransfer.setData(format, event.target.id)
:
format
above can betext
,text/plain
,text/html
etc, orURL
format.This function set up the data that is take via
event.target.id
, which is theid
for draggable stuff, and temparary store it. Noteevent.target
now pointing to draggable stuff.
ondragover
This attribute takes a JavaScript method. This method takes a event
parameter and describe what will happen when you drag stuff over elements without drop the stuff.
Basic set up is event.preventDefault()
, which prevents browser asking elements doing default behavior.
ondrop
This attribute takes a JavaScript method. This method takes a event
parameter and describe what will happen when you drop the draggable stuff.
First, you should do event.preventDefault()
, which prevents browser asking elements doing default behavior.
Then, you need to get the data that you dragged by using event.dataTransfer.getData(format)
. The format should corresponding what you had in event.dataTransfer.setData()
method.
The method will return all data that has same format.
You can get current dropdown container by using event.target
(instead of draggable element). You can choose to append your draggable stuff by using
event.target.appendChild(document.getElementById(event.dataTransfer.getData(format))
if you passed id
in ondragstart
's method. Or you can do whatever you want.