001/*
002 * Licensed to the Apache Software Foundation (ASF) under one or more
003 * contributor license agreements.  See the NOTICE file distributed with
004 * this work for additional information regarding copyright ownership.
005 * The ASF licenses this file to You under the Apache License, Version 2.0
006 * (the "License"); you may not use this file except in compliance with
007 * the License.  You may obtain a copy of the License at
008 *
009 *      http://www.apache.org/licenses/LICENSE-2.0
010 *
011 * Unless required by applicable law or agreed to in writing, software
012 * distributed under the License is distributed on an "AS IS" BASIS,
013 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
014 * See the License for the specific language governing permissions and
015 * limitations under the License.
016 */
017package org.apache.juneau.bean.html5;
018
019import org.apache.juneau.marshall.*;
020
021/**
022 * DTO for an HTML <a class="doclink" href="https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element">&lt;canvas&gt;</a>
023 * element.
024 *
025 * <p>
026 * The canvas element provides a resolution-dependent bitmap canvas that can be used for rendering
027 * graphs, game graphics, or other visual images on the fly. It is used with JavaScript to create
028 * dynamic, scriptable rendering of 2D shapes and bitmap images. The canvas element requires both
029 * width and height attributes to define the canvas size, and the actual drawing is done through
030 * the Canvas API in JavaScript.
031 *
032 * <h5 class='section'>Examples:</h5>
033 * <p class='bcode w800'>
034 *    <jk>import static</jk> org.apache.juneau.bean.html5.HtmlBuilder.*;
035 *
036 *    <jc>// Basic canvas</jc>
037 *    Canvas <jv>basic</jv> = <jsm>canvas</jsm>(300, 200);
038 *
039 *    <jc>// Canvas with ID for JavaScript access</jc>
040 *    Canvas <jv>withId</jv> = <jsm>canvas</jsm>(400, 300)
041 *       .id(<js>"myCanvas"</js>);
042 *
043 *    <jc>// Canvas with styling</jc>
044 *    Canvas <jv>styled</jv> = <jsm>canvas</jsm>(500, 400)
045 *       .id(<js>"drawingCanvas"</js>)
046 *       .class_(<js>"canvas-element"</js>)
047 *       .style(<js>"border: 1px solid #ccc;"</js>);
048 *
049 *    <jc>// Canvas with event handlers</jc>
050 *    Canvas <jv>interactive</jv> = <jsm>canvas</jsm>(800, 600)
051 *       .id(<js>"gameCanvas"</js>)
052 *       .onclick(<js>"handleCanvasClick(event)"</js>)
053 *       .onmousemove(<js>"handleMouseMove(event)"</js>);
054 *
055 *    <jc>// Canvas with fallback content</jc>
056 *    Canvas <jv>withFallback</jv> = <jsm>canvas</jsm>(600, 400)
057 *       .id(<js>"chartCanvas"</js>)
058 *       .children(<js>"Your browser does not support the canvas element."</js>);
059 *
060 *    <jc>// Canvas for data visualization</jc>
061 *    Canvas <jv>chart</jv> = <jsm>canvas</jsm>(800, 500)
062 *       .id(<js>"dataChart"</js>)
063 *       .title(<js>"Interactive Data Chart"</js>);
064 *
065 *    <jc>// Canvas with accessibility</jc>
066 *    Canvas <jv>accessible</jv> = <jsm>canvas</jsm>(400, 300)
067 *       .id(<js>"accessibleCanvas"</js>)
068 *       .title(<js>"Interactive drawing canvas"</js>)
069 *       .children(<js>"Use your mouse to draw on this canvas."</js>);
070 * </p>
071 *
072 * <p>
073 * The following convenience methods are provided for constructing instances of this bean:
074 * <ul class='javatree'>
075 *    <li class='jc'>{@link HtmlBuilder}
076 *    <ul class='javatree'>
077 *       <li class='jm'>{@link HtmlBuilder#canvas() canvas()}
078 *       <li class='jm'>{@link HtmlBuilder#canvas(Number, Number) canvas(Number, Number)}
079 *    </ul>
080 * </ul>
081 * </p>
082 *
083 * <h5 class='section'>See Also:</h5><ul>
084 *    <li class='link'><a class="doclink" href="https://juneau.apache.org/docs/topics/JuneauBeanHtml5">juneau-bean-html5</a>
085 * </ul>
086 */
087@Marshalled(typeName = "canvas")
088public class Canvas extends HtmlElementMixed<Canvas> {
089
090   /**
091    * Creates an empty {@link Canvas} element.
092    */
093   public Canvas() {}
094
095   /**
096    * Creates a {@link Canvas} element with the specified {@link Canvas#width(Object)} and
097    * {@link Canvas#height(Object)} attributes.
098    *
099    * @param width The {@link Canvas#width(Object)} attribute. Can be <jk>null</jk> to unset the attribute.
100    * @param height The {@link Canvas#height(Object)} attribute. Can be <jk>null</jk> to unset the attribute.
101    */
102   public Canvas(Number width, Number height) {
103      width(width).height(height);
104   }
105
106   /**
107    * <a class="doclink" href="https://www.w3.org/TR/html5/scripting-1.html#attr-canvas-height">height</a> attribute.
108    *
109    * <p>
110    * Vertical dimension.
111    *
112    * @param value
113    *    The new value for this attribute.
114    *    Typically a {@link Number} or {@link String}.
115    *    Can be <jk>null</jk> to unset the attribute.
116    * @return This object.
117    */
118   public Canvas height(Object value) {
119      attr("height", value);
120      return this;
121   }
122
123   /**
124    * <a class="doclink" href="https://www.w3.org/TR/html5/scripting-1.html#attr-canvas-width">width</a> attribute.
125    *
126    * <p>
127    * Horizontal dimension.
128    *
129    * @param value
130    *    The new value for this attribute.
131    *    Typically a {@link Number} or {@link String}.
132    *    Can be <jk>null</jk> to unset the attribute.
133    * @return This object.
134    */
135   public Canvas width(Object value) {
136      attr("width", value);
137      return this;
138   }
139}