output element
The output element represents the result of a calculation.
Ideal to be used with range inputs, as Mike Taylor demonstrates.
The output element represents the result of a calculation.
Ideal to be used with range inputs, as Mike Taylor demonstrates.
<figure> elements a good amount of margin from Firefox and WebKit’s user agent styles.
figure {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;
}
See fiddle figure margin
This is a new style within the past year, as 3dtransforms use <figure>s for the panels of the 3D objects. The default margin was offsetting all the panels.
normalize.css already has the situation under control, setting figure { margin: 0; }.
The
typeattribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. Thecharsetparameter must not be specified. The default, which is used if the attribute is absent, is"text/javascript"
To resolve a question in the HTML5 Boilerplate repo. Important to note is that the details provided on w3schools misleads that the type attribute is required.
John Schulz, regarding using getImageData() on remote images:
@desandro See http://bit.ly/cTS0Vd for ideas on loading remote images. It uses jQuery, but loading img-to-json URL+cb as script should work.
From the $.getImageData page:
$.getImageData allows anyone to get an image from another domain and have pixel level access to it using the
getImageData()method. It works by sending a request with the URL of the image to google’s servers via the Google App Engine. The server then converts the image into base64 encoded data URL and sends the image back as a JSON object. This means that the image can be locally included on the website and therefore it can be edited by thecanvastag.
Information leakage can occur if scripts from one origin can access information (e.g. read pixels) from images from another origin (one that isn’t the same).
To mitigate this,
canvaselements are defined to have a flag indicating whether they are origin-clean. Allcanvaselements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:
- The element’s 2D context’s
drawImage()method is called with anHTMLImageElementor anHTMLVideoElementwhose origin is not the same as that of theDocumentobject that owns thecanvaselement.
…
Whenever the
toDataURL()method of a canvas element whose origin-clean flag is set to false is called, the method must raise aSECURITY_ERRexception.Whenever the
getImageData()method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise aSECURITY_ERRexception.
I was pretty jazzed to get Close Pixelate working on all over the web. Dynamically pulling in images from Flickr would have been fun. Turns out the HTML5 Spec explicitly disallows using getImageData or toDataURL() on images not hosted on the same domain of the current page.
