--- title: CanvasRenderingContext2D.lineWidth slug: Web/API/CanvasRenderingContext2D/lineWidth translation_of: Web/API/CanvasRenderingContext2D/lineWidth --- <div>{{APIRef}}</div> <p><code>Свойство<strong> CanvasRenderingContext2D</strong></code><strong><code>.lineWidth</code></strong>, предоставляемое Canvas 2D API задаёт толщину линий в пикселах. При получении свойства возвращается его текущее значение. При задании свойства, присваиваемое значение должно быть положительным числом, ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</p> <p>Смотрите также главу <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Applying styles and color</a> в <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a>.</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="syntaxbox"><var><em>ctx</em>.lineWidth = value;</var></pre> <h3 id="Значения">Значения</h3> <dl> <dt><code>value</code></dt> <dd>Число, задающее толщину линии в пикселах. Ноль, отрицательные числа, {{jsxref("Infinity")}} и {{jsxref("NaN")}} игнорируются.</dd> </dl> <h2 id="Примеры">Примеры</h2> <h3 id="Using_the_lineWidth_property">Использование свойства lineWidth</h3> <p>Ниже представлен простой фрагмент кода, использующий lineWidth.</p> <h4 id="HTML">HTML</h4> <pre class="brush: html"><canvas id="canvas"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> <pre class="brush: js; highlight[6]">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineTo(100, 100); ctx.stroke(); </pre> <p>Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:</p> <div class="hidden"> <h6 id="Playable_code">Playable code</h6> <pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineTo(100, 100); ctx.stroke();</textarea> </pre> <pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> </div> <p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> <h2 id="Спецификации">Спецификации</h2> {{Specifications}} <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> <p>{{Compat}}</p> <h2 id="Особенности_WebKitBlink">Особенности WebKit/Blink</h2> <ul> <li>В браузерах на базе WebKit и Blink, помимо этого свойства также поддерживается нестандартный метод <code>ctx.setLineWidth()</code>.</li> </ul> <h2 id="Особенности_Gecko">Особенности Gecko</h2> <ul> <li>В Gecko ниже 2.0 версии, при задании lineWidth отрицательного значения выбрасывалось исключение.</li> </ul> <h2 id="Смотрите_также">Смотрите также</h2> <ul> <li>Интерфейс, предоставляющий это свойство: {{domxref("CanvasRenderingContext2D")}}</li> <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> </ul>