The HTML5 file Blob.slice() method is useful for creating a Blob object containing the data. This data is in the specified range of bytes of the source Blob. It uses XMLHttpRequest as in the below example.Let us see an example to send and receive binary data using slice(). This example sends a text and uses the POST method to send the "file" to the server:var val = new XMLHttpRequest(); val.open("POST", url, true); val.onload = function (event) { }; var blob = new Blob(['demo'], {type: 'text/plain'}); val.send(blob);For video:req.onload = function () {    var blob_uri = URL.createObjectURL(this.response);    myElement.appendChild(document.createElement("source")).src = ... Read More

For this, you can use the SVG elements. Let us see an example:           DEMO          

Drag and Drop (DnD) is powerful User Interface concept that makes it easy to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.For drag and drop:                    #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}          #boxA { background-color: #6633FF; width:75px; height:75px; }          #boxB { background-color: #FF6699; width:150px; height:150px; }       ... Read More

Flash provides amazing GUI and many visual features for animations. It allows the user build everything inside a particular platform without a full integration into the browser wrapped inside the browser with the main scopes that are multimedia and other kinds of animation.The HTML5 element gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.Here is a simple element that has only two specific attributes width and height plus all the core HTML5 attributes like id, name, and ... Read More

To keep the image at the back of the canvas, when move elements, you need to pass:preserveObjectStackingAnd the following would work and the image is not visible in the background:window.canvas = new fabric.Canvas('c', { preserveObjectStacking:true });Now, on moving the shape will appear over the image.

The rupee symbol is the following and not every browser supports it:₹To make it visible on your web page: You can use the following as well:₹

Use display: inline-flex to adopt a flex div’s width to content:#box {    display: inline-flex;    flex-direction: row;    flex-wrap: wrap;    max-width: 200px;    padding: 10px;    margin: 20px;    background-color: blue; }

To update HTML5 canvas rectangle on hover, try to run the following code:var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.rect(20,20,150,100); context.stroke(); $(canvas).hover(function(e){    context.fillStyle = blue;    context.fill(); });

FabricJS has the following API methods that change the z-index of objects:canvas.sendBackwards(myObject) canvas.sendToBack(myObject) canvas.bringForward(myObject) canvas.bringToFront(myObject)You can also use:fabric.Canvas.prototype.orderObjects = function(compare) {    this._objects.sort(compare);    this.renderAll(); }

A byte order mark (BOM) consists of the character code U+FEFF at the beginning of a data stream, where it can be used as a signature defining the byte order and encoding form, primarily of unmarked plaintext files.Many Windows programs (including Windows Notepad) add the bytes 0xEF, 0xBB, 0xBF at the start of any document saved as UTF-8. This is the UTF-8 encoding of the Unicode byte order mark (BOM), and is commonly referred to as a UTF-8 BOM even though it is not relevant to byte order.For HTML5 document, you can use a Unicode Byte Order Mark (BOM) character ... Read More