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 * <h2 class='section'>Examples:</h2>
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 *
082 * <h2 class='section'>See Also:</h2><ul>
083 *    <li class='link'><a class="doclink" href="https://juneau.apache.org/docs/topics/JuneauBeanHtml5">juneau-bean-html5</a>
084 * </ul>
085 */
086@Marshalled(typeName = "canvas")
087public class Canvas extends HtmlElementMixed<Canvas> {
088
089   /**
090    * Creates an empty {@link Canvas} element.
091    */
092   public Canvas() {}
093
094   /**
095    * Creates a {@link Canvas} element with the specified {@link Canvas#width(Object)} and
096    * {@link Canvas#height(Object)} attributes.
097    *
098    * @param width The {@link Canvas#width(Object)} attribute. Can be <jk>null</jk> to unset the attribute.
099    * @param height The {@link Canvas#height(Object)} attribute. Can be <jk>null</jk> to unset the attribute.
100    */
101   public Canvas(Number width, Number height) {
102      width(width).height(height);
103   }
104
105   /**
106    * <a class="doclink" href="https://www.w3.org/TR/html5/scripting-1.html#attr-canvas-height">height</a> attribute.
107    *
108    * <p>
109    * Vertical dimension.
110    *
111    * @param value
112    *    The new value for this attribute.
113    *    Typically a {@link Number} or {@link String}.
114    *    Can be <jk>null</jk> to unset the attribute.
115    * @return This object.
116    */
117   public Canvas height(Object value) {
118      attr("height", value);
119      return this;
120   }
121
122   /**
123    * <a class="doclink" href="https://www.w3.org/TR/html5/scripting-1.html#attr-canvas-width">width</a> attribute.
124    *
125    * <p>
126    * Horizontal dimension.
127    *
128    * @param value
129    *    The new value for this attribute.
130    *    Typically a {@link Number} or {@link String}.
131    *    Can be <jk>null</jk> to unset the attribute.
132    * @return This object.
133    */
134   public Canvas width(Object value) {
135      attr("width", value);
136      return this;
137   }
138}