Using Accordion inside canvas

Question

When we use the accordion, we call it using an id inside a div

<div id="accordion">

What I want to do is using accordion inside a canvas element. Canvas tag already calls its id, I don't have any idea how to solve this issue.

The main purpose is to have an area on the left where the images are sorted in three sections, which will be put inside an accordion. On the right, I drawed a grid inside another canvas element. This is where the images will be dropped. Here is the code, I stopped here, and I don't know for what reason jsfiddle only shows one canvas although the drawing of the grid is correct. I apologize for my bad code.

http://jsfiddle.net/uS4er/4/

Answer 1

The jQueryUI accordion wiget will not operate inside an html canvas.

An alternate plan:

You could create your image-source-accordion outside and left of the canvas.

Then use jQuery draggable plus canvas as a dropzone to copy an image from your toolbox and draw it on the canvas.

This link shows how to use jqueryUI draggable to "drop" an img element on the canvas:

Drag controls from container and drop/draw them on canvas

Answer 2

Not sure if this is the result you want, but this will render a <div id="accordion"> on a <canvas> element, or any other content on a canvas. http://jsfiddle.net/L93gA/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size: 12px;' id='accordion'>" +
                 "Content of accordion" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

Based on the example on https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas